/*-- Index --*/

.index-header {
    background-image:url(https://focusonyoupc.com/resources/img/index/header.png);
    margin-top:12rem;
    width: 100vw;
    height: auto;
    background-repeat: no-repeat;
    background-size: contain;
}

@media (min-width: 768px) {.index-header {margin-top:7rem;}}

    .index-header .textbox {
        margin-left:1rem;
        margin-top:20rem;
        margin-bottom:0rem;
        padding:5rem 5rem 0rem 7rem;
        max-width:100vw;
        text-align:center;
        
    }

    @media (min-width: 768px) {.index-header .textbox {
        margin-top:13rem;
        max-width:40%;
        margin-left:10rem;
        background:linear-gradient(90deg, #FFFFFF 58.78%, rgba(255, 255, 255, 0) 94.84%);
        margin-bottom:10rem;
        padding:5rem;
        text-align:left;
    }}

        .index-header .textbox h1 {
            font-size:4rem;
            font-weight:700;
            line-height:1.2;
            margin-bottom:1.5rem;
        }

        @media (min-width: 768px) {.index-header .textbox h1 {font-size:5rem;}}

        .index-header .textbox p {
            font-size:1.8rem;
            margin-bottom:1.5rem;
            max-width:100%;
        }

        @media (min-width: 768px) {.index-header .textbox p {max-width:75%;  font-size:1.6rem;}}

/*-- Stats --*/

.stats .textbox {
    margin:2rem auto;
}

    .stats .textbox .col-md {
        padding:0 !important;
        text-align:center;
    }

        .stats .textbox h3,
        .stats .textbox p {display:inline;}

        .stats .textbox h3 {
            margin-right:.5rem;
            font-size:4rem;
            float:none;
        }

        @media (min-width: 768px) {.stats .textbox h3 {float:right; font-size:3rem;}}

        .stats .textbox p {
            margin-left:.5rem;
            float:none;
            font-size:1.9rem;
            font-weight:700;
        }

        @media (min-width: 768px) {.stats .textbox p {float:left; font-size:1.6rem;}}

/*-- About --*/

.about .imgbox img {width:85%;}

.about .textbox {margin:2rem 2rem 0 2rem; text-align:center;}

@media (min-width: 768px) {.about .textbox {margin:2rem 10rem 0 5rem; text-align:left;}}

.about .textbox h4 {
    font-size:1.9rem;
    margin-bottom:.75rem;
}

@media (min-width: 768px) {.about .textbox h4 {font-size:1.4rem;}}

.about hr {
    width:10%;
    border: .2rem solid #0BB155;
    margin:1.5rem auto;
}

@media (min-width: 768px) {.about hr {margin:0;  width:4%;}}

.about .textbox h2 {
    font-size:3.5rem;
    padding-right:0rem;
    line-height:1.2;
    margin-bottom:1.5rem;
    margin-top:.75rem;
}

@media (min-width: 768px) {.about .textbox h2 {padding-right:3rem;}}

.about .textbox p {
    font-size:1.8rem;
    margin-bottom:2.5rem;
}

@media (min-width: 768px) {.about .textbox p {margin-bottom:1.5rem;}}

/*-- Services --*/

.services {
    position:relative;
    padding:10rem 0;
    background-color:#EFF8F7;
    margin-bottom:0 !important;
}

    .services img.bkgd-1 {
        position:absolute;
        top:13rem;
        left:0;
        width:22%;
    }

    .services img.bkgd-2 {
        position:absolute;
        top:52rem;
        right:0;
        width:22%;
    }

    .services img.bkgd-3 {
        position:absolute;
        bottom:38rem;
        left:0;
        width:24%;
    }

        .services .title h4 {
            font-size:1.4rem;
            margin-bottom:.75rem;
        }

        .services .title h2 {
            font-size:4rem;
            margin-bottom:5rem;
        }

    .services .tile {
        background-color:#fff;
        box-shadow: 0px 5.01395px 36.3512px rgba(0, 0, 0, 0.1);
        border-radius:1rem;
        padding:0 0 3rem 0 !important;
        margin:3rem;
    }

        .services .tile img {
            width:100%;
            height:auto;
            border-radius:1rem 1rem 0 0;
        }

        .services .tile h3 {
            margin:2rem auto 1.5rem auto;
            font-size:2.1rem;
        }

        @media (min-width: 768px) {.services .tile h3 {font-size:1.9rem;}}

        .services .tile p {
            margin:2rem auto 2rem auto;
            font-size:1.8rem;
            padding:0 3.7rem;
        }

        @media (min-width: 768px) {.services .tile p {font-size:1.4rem;}}

/*-- Our Values --*/

.values {
    margin-top:0 !important;
    background-color:#006C8B;
}

    .values .imgbox {
        position:relative;
    }

        .values .imgbox img {
            width:100%;
            height:auto;
            padding-bottom:0 !important;
            margin:0 0 -.4rem -2rem;
        }

        @media (min-width: 768px) {.values .imgbox img {width:90%;}}

    .values .textbox {
        margin:5rem 0 0 0;
        text-align:center;
    }

    @media (min-width: 768px) {.values .textbox {margin:10rem 0; text-align:left;}}

        .values .textbox h4 {
            font-size:1.9rem;
            margin-bottom:.75rem;
        }

        @media (min-width: 768px) {.values .textbox h4 {font-size:1.4rem;}}

        .values .textbox hr.short {
            width:10%;
            border: .2rem solid #F6D167;
            margin:1.5rem auto;
        }

        @media (min-width: 768px) {.values .textbox hr.short {width:4%; margin:0;}}

        .values .textbox hr.long {
            width:60%;
            border: .2rem solid #F6D167;
            margin:auto;
        }

        @media (min-width: 768px) {.values .textbox hr.long {margin:0;}}

        .values .textbox h2 {
            font-size:3.7rem;
            padding-right:0rem;
            line-height:1.2;
            margin-bottom:1.75rem;
            margin-top:1rem;
            color:#fff;
        }

        @media (min-width: 768px) {.values .textbox h2 {padding-right:13rem; font-size:3.5rem;}}

        .values .textbox h3 {
            font-size:1.7rem;
            padding-right:0rem;
            padding-top:3rem;
            line-height:1.2;
            margin-bottom:1rem;
            color:#fff;
        }

        @media (min-width: 768px) {.values .textbox h3 {padding-right:13rem; font-size:1.6rem; margin-bottom:0.5rem;}}
        
        .values .textbox p {
            font-size:1.8rem;
            margin-bottom:3rem;
            padding-right:0rem;
            color:#fff;
        }

        @media (min-width: 768px) {.values .textbox p { padding-right:13rem; font-size:1.5rem;}}

/*-- Testimonials --*/

.testimonials {
    position:relative;
   padding-bottom:10rem;
}

    .testimonials img.bkgd-1 {
        position:absolute;
        top:18rem;
        left:0;
        width:25%;
    }

    .testimonials img.bkgd-2 {
        position:absolute;
        top:16rem;
        right:0;
        width:25%;
    }


.testimonials .title {
    margin:5rem auto;
}

    .testimonials .title h4 {
        font-size:1.9rem;
        margin-bottom:.75rem;
    }

    @media (min-width: 768px) {.testimonials .title h4 {font-size:1.4rem;}}

    .testimonials .title h2 {
        font-size:4rem;
        margin-bottom:2rem;
    }

    .testimonials .tile {
        background-color:#fff;
        box-shadow: 0px 4.51256px 32.716px rgba(0, 0, 0, 0.1);
        border-radius: 11.2814px;
        padding:5rem;
        margin:4rem 2rem;
    }

    @media (min-width: 768px) {.testimonials .tile {margin:0 4rem;}}

        .testimonials .tile img {
            width:12rem;
            height:auto;
            margin-bottom:2rem;
        }

        .testimonials .tile p {
            font-size:1.8rem;
            margin-bottom:1.5rem;
        }

        @media (min-width: 768px) {.testimonials .tile p {font-size:1.5rem;}}

        .testimonials .tile h4 {
            font-weight:700;
            font-size:1.5rem;
        }

/*-- Get Started --*/

.get-started {
    background-color:#5BB287;
    padding:5rem 0;
    text-align:center;
}

@media (min-width: 768px) {.get-started {text-align:left;}}

    .get-started .imgbox img {
        width:50%;
    }

    .get-started .textbox h2 {
        font-size:3.5rem;
        padding-right:0rem;
        line-height:1.2;
        margin-bottom:1.75rem;
        margin-top:3.5rem;
        color:#fff;
    }

    @media (min-width: 768px) {.get-started .textbox h2 {padding-right:13rem;}}

    .get-started .textbox p {
        font-size:1.8rem;
        margin-bottom:3.5rem;
        padding-right:0rem;
        color:#fff;
    }

    @media (min-width: 768px) {.get-started .textbox p {padding-right:13rem; margin-bottom:3rem; font-size:1.5rem;}}

    .get-started .textbox .link {
        text-decoration:none;
        color:#fff;
    }

    .get-started .textbox h3 {
        font-size:2rem;
        padding-right:0rem;
        padding-top:3rem;
        line-height:1.2;
        margin-bottom:0.5rem;
        color:#fff;
    }

    @media (min-width: 768px) {.get-started .textbox h3 {padding-right:13rem; padding-top:1rem;}}


/*-- About ---*/

.sub-header {
    margin-top:0rem;
}

@media (min-width: 768px) {.sub-header {margin-top:12rem;}}

.sub-header img {width:100%;}

    .sub-header .textbox {
        margin-left:1rem;
        margin-top:15rem;
        margin-bottom:0rem;
        padding:5rem 5rem 38rem 7rem;
        max-width:100vw;
        text-align:center;
        
    }

    @media (min-width: 768px) {.sub-header .textbox {
        margin-top:1rem;
        max-width:100%;
        margin-left:10rem;
        padding:5rem;
        text-align:left;
    }}

        .sub-header .textbox h3 {
            font-size:1.6rem;
            margin-bottom:1.5rem;
            font-weight:400;
            max-width:100%;
        }

        .sub-header .textbox h1 {
            font-size:4.5rem;
            font-weight:700;
            line-height:1.2;
            margin-bottom:2rem;
        }

        @media (min-width: 768px) {.sub-header .textbox h1 {font-size:4.5rem; margin-bottom:1.5rem;}}

        .sub-header .textbox p {
            font-size:1.8rem;
            margin-bottom:2rem;
            max-width:100%;
        }

        @media (min-width: 768px) {.sub-header .textbox p {max-width:75%;  font-size:1.5rem;  margin-bottom:1.5rem;}}

        .sub-header {position:relative;}

            .sub-header img {
                position:absolute;
                bottom:0;
                right:0;
                width:100%;
            }

            @media (min-width: 768px) {.sub-header img {width:42%;}}

            .personal-care img {width:80%;}
            @media (min-width: 768px) {.personal-care img {width:30%;}}

            .homemaking img {width:80%;}
            @media (min-width: 768px) {.homemaking img {width:30%;}}

/*-- Beliefs --*/

.beliefs {
    margin-top:0 !important;
    background-color:#006C8B;
    text-align:center;
}

@media (min-width: 768px) {.beliefs {text-align:left;}}

    .beliefs .textbox {padding:10rem 2rem 50rem 2rem;}

    @media (min-width: 768px) {.beliefs .textbox {padding:10rem 0 10rem 10rem;}}

        .beliefs .textbox h4 {
            font-size:1.9rem;
            margin-bottom:.75rem;
        }

        .beliefs .textbox hr.short {
            width:10%;
            border: .2rem solid #F6D167;
            margin:1.5rem auto;
        }

        @media (min-width: 768px) {.beliefs .textbox hr.short {width:4%; margin:0;}}

        .beliefs .textbox h2 {
            font-size:3.2rem;
            font-weight:700;
            line-height:1.2;
            color:#fff;
            margin-bottom:2.5rem;
            margin-top:2rem;
        }

        @media (min-width: 768px) {.beliefs .textbox h2 {font-size:4rem; margin-bottom:2rem;}}

        .beliefs .textbox p {
            font-size:1.8rem;
            margin-bottom:3rem;
            color:#fff;
        }

        @media (min-width: 768px) {.beliefs .textbox p {font-size:1.8rem;}}

    .beliefs .imgbox {
        position:relative;
    }

        .beliefs .imgbox img {
            position:absolute;
            bottom:0;
            right:-.5rem;
            width:90%;
            height:auto;
            padding:0 !important;
        }

        @media (min-width: 768px) {.beliefs .imgbox img {width:85%;}}

/*-- Our Team --*/

.team {
    position:relative;
    padding:5rem 0;
    margin-bottom:0 !important;
}

    .team .title h4 {
        font-size:1.4rem;
        margin-bottom:.75rem;
    }

    .team .title h2 {
        font-size:4rem;
        margin-bottom:5rem;
    }

    .team .thumbnail {margin:4rem;}

    @media (min-width: 768px) {.team .thumbnail {margin:3rem;}}

    .team .thumbnail img {
        width:100%;
        height:auto;
        border-radius:1.8rem;
        margin-bottom:1rem;
    }

    .team .thumbnail h3 {
        font-size:3rem;
        font-weight:500;
    }

    @media (min-width: 768px) {.team .thumbnail h3 {font-size:2rem;}}

    .team .thumbnail h4 {
        font-size:1.6rem;
        font-weight:500;
        color:#9B9B9B;
        margin-bottom:1rem;
    }

    @media (min-width: 768px) {.team .thumbnail h4 {font-size:1.3rem;}}

    .team .thumbnail p {
        font-size:1.7rem;
        margin-bottom:1rem;
    }

    @media (min-width: 768px) {.team .thumbnail p {font-size:1.4rem;}}


/*-- Services --*/

/*-- Services --*/

.process {
    position:relative;
    padding:10rem 0;
    background-color:#EFF8F7;
    margin-bottom:0 !important;
}

    .process .title h4 {
        font-size:1.9rem;
        margin-bottom:.75rem;
    }

    @media (min-width: 768px) {.process .title h4 {font-size:1.4rem;}}

    .process .title h2 {
        font-size:4rem;
        margin-bottom:5rem;
    }

.process .thumbnail {
    margin:3rem 2rem;
}

@media (min-width: 768px) {.process .thumbnail {margin:2rem;}}

    .process .thumbnail img {
        width:30%;
        margin-bottom:3rem;
    }

    @media (min-width: 768px) {.process .thumbnail img {width:40%; margin-bottom:1.5rem;}}

    .process .thumbnail h4 {
        font-size:3rem;
        line-height:1.2;
        width:80%;
        margin:0 auto 2.5rem auto;
    }

    @media (min-width: 768px) {.process .thumbnail h4 {font-size:1.8rem; margin:0 auto 1.5rem auto; width:100%;}}

    .process .thumbnail p {
        font-size:1.8rem;
        margin-bottom:2.5rem;
    }

    @media (min-width: 768px) {.process .thumbnail p {font-size:1.3rem; margin-bottom:1.5rem;}}


    /*--- Find a Caregiver --*/

    .caregiver {text-align: center !important; margin-bottom:10rem;}

    .caregiver .textbox {
        margin: 19rem auto 1rem auto;
    }

    @media (min-width: 768px) {.caregiver .textbox {margin: 18rem auto 1rem auto;}}

    .caregiver .textbox h4 {
        font-size:1.9rem;
        margin-bottom:.75rem;
        text-align:center;
    }

    @media (min-width: 768px) {.caregiver .textbox h4 {font-size:1.4rem;}}
    
    .caregiver hr {
        width:10%;
        border: .2rem solid #0BB155;
        margin:1.5rem auto;
    }

    @media (min-width: 768px) {.caregiver hr {margin:1.5rem 0;  width:4%;}}

    .caregiver .textbox h1 {
        font-size:3.5rem;
        margin-bottom:4rem;
        line-height:1.2;
        text-align:center;
    }

    @media (min-width: 768px) {.caregiver .textbox h1 {margin-bottom:1rem;}}

    .caregiver .textbox p {
        font-size:1.8rem;
        margin-bottom:2rem;
    }

    @media (min-width: 768px) {.caregiver .textbox p {font-size:1.4rem;}}

    .caregiver .textbox ul {
        margin:2rem 0;
    }

    .caregiver .textbox .list li {
        font-size:1.8rem;
        margin-bottom:.5rem;
        margin-left:2.5rem;
    }

    @media (min-width: 768px) {.caregiver .textbox .list li {font-size:1.4rem;}}

    .caregiver .textbox h3 {
        font-size:2rem;
        margin-top:2rem;
        font-weight:700;
    }

    @media (min-width: 768px) {.caregiver .textbox h3 {font-size:1.6rem;}}

    .caregiver .textbox h5 {
        font-size:1.6rem;
        margin:1rem 0;
        font-weight:700;
    }

    @media (min-width: 768px) {.caregiver .textbox h5 {font-size:1.4rem;}}

    .caregiver .textbox a {
        text-decoration:none;
        color:#444;
        display:block;
        font-size:1.8rem;
    }

    @media (min-width: 768px) {.caregiver .textbox a {font-size:1.4rem;}}

    .caregiver .sidebar {
        height: 100%;
        width: 30vw;
        position: fixed;
        z-index: 1;
        top: 0rem;
        right: 0;
        overflow-x: hidden;
    }

    .caregiver .sidebar h3 {
        font-size:2.9rem;
        width:70%;
        margin: 17rem auto 1rem auto;
        line-height:1.2;
    }

    .caregiver .sidebar p {
        font-size:1.6rem;
        width:70%;
        margin: 0 auto 1rem auto;
    }

    .caregiver .sidebar a {
        text-decoration:none;
        color:#006C8B;
        font-weight:700;
    }

    .caregiver .sidebar img {
        position:absolute;
        width:70%;
        left:10%;
        bottom:0;
    }

/*--- Apply To Be A Caregiver --*/

    .apply-caregiver .textbox {
        margin: 19rem 0 1rem 0;
    }

    @media (min-width: 768px) {.apply-caregiver .textbox {margin: 18rem 0 1rem 0;}}

    .apply-caregiver .textbox h4 {
        font-size:1.9rem;
        margin-bottom:.75rem;
        text-align:center;
    }

    @media (min-width: 768px) {.apply-caregiver .textbox h4 {text-align:left; font-size:1.4rem;}}
    
    .apply-caregiver hr {
        width:10%;
        border: .2rem solid #0BB155;
        margin:1.5rem auto;
    }

    @media (min-width: 768px) {.apply-caregiver hr {margin:1.5rem 0;  width:4%;}}

    .apply-caregiver .textbox h1 {
        font-size:3.5rem;
        margin-bottom:4rem;
        line-height:1.2;
        text-align:center;
    }

    @media (min-width: 768px) {.apply-caregiver .textbox h1 {text-align:left;margin-bottom:1rem;}}

    .apply-caregiver .textbox p {
        font-size:1.8rem;
        margin-bottom:2rem;
    }

    @media (min-width: 768px) {.apply-caregiver .textbox p {font-size:1.4rem;}}

    .apply-caregiver .textbox ul {
        margin:2rem 0;
    }

    .apply-caregiver .textbox .list li {
        font-size:1.8rem;
        margin-bottom:.5rem;
        margin-left:2.5rem;
    }

    @media (min-width: 768px) {.apply-caregiver .textbox .list li {font-size:1.4rem;}}

    .apply-caregiver .textbox h3 {
        font-size:2rem;
        margin-top:2rem;
        font-weight:700;
    }

    @media (min-width: 768px) {.apply-caregiver .textbox h3 {font-size:1.6rem;}}

    .apply-caregiver .textbox h5 {
        font-size:1.6rem;
        margin:1rem 0;
        font-weight:700;
    }

    @media (min-width: 768px) {.apply-caregiver .textbox h5 {font-size:1.4rem;}}

    .apply-caregiver .textbox a {
        text-decoration:none;
        color:#444;
        display:block;
        font-size:1.8rem;
    }

    @media (min-width: 768px) {.apply-caregiver .textbox a {font-size:1.4rem;}}

    .apply-caregiver .sidebar {
        height: 100%;
        width: 30vw;
        position: fixed;
        z-index: 1;
        top: 0rem;
        right: 0;
        overflow-x: hidden;
    }

    .apply-caregiver .sidebar h3 {
        font-size:2.9rem;
        width:70%;
        margin: 17rem auto 1rem auto;
        line-height:1.2;
    }

    .apply-caregiver .sidebar p {
        font-size:1.6rem;
        width:70%;
        margin: 0 auto 1rem auto;
    }

    .apply-caregiver .sidebar a {
        text-decoration:none;
        color:#006C8B;
        font-weight:700;
    }

    .apply-caregiver .sidebar img {
        position:absolute;
        width:70%;
        left:10%;
        bottom:0;
    }