/*------------------------------ Index ------------------------------*/

/*-- Index Header --*/
.index-header {background-color:var(--pale); margin-top:5rem;}
@media (min-width: 768px) {.index-header {margin-top:-10rem;}}

.index-header .container {padding-top:12rem;}

    .index-header .textbox {margin:-3rem auto 0 0; text-align:center;}
    @media (min-width: 768px) {.index-header .textbox {margin:-3rem auto 0 3rem; text-align:left;}}

        .index-header .textbox h1 {font-size:5.5rem; line-height:1.1; font-family:'Instrument SemiBold'; margin-bottom:2rem; width:100%;}
        @media (min-width: 768px) {.index-header .textbox h1 {font-size:6.7rem; width:110%;}}

        .index-header .textbox p {width:100%; font-size:2rem; margin-bottom:2rem;}
        @media (min-width: 768px) {.index-header .textbox p {width:85%; font-size:2rem; margin-bottom:2rem;}}

        .index-header .imgbox img {width:90%;}

    .index-header .value {padding:7rem 0;}

        .index-header .value .tile {margin-bottom:1.5rem;}
        @media (min-width: 768px) {.index-header .value .tile {margin-bottom:0;}}

        .index-header .value .tile:last-child {margin-left:0}
        @media (min-width: 768px) {.index-header .value .tile:last-child {margin-left:5rem}}

        .index-header .value img {height:4rem; width:auto; display:inline; margin-right:2rem;}

        .index-header .value h3 {font-size:2rem; font-family:'Instrument', sans-serif;}
    

/*-- Our Services --*/

.services {padding:5rem 4rem;}
@media (min-width: 768px) {.services {padding:8rem 5rem 3rem 5rem;;}}

    .services .title {margin-bottom:5rem;}

        .services .title h2 {width:100%; margin:1rem auto auto auto;}
        @media (min-width: 768px) {.services .title h2 {width:40%; margin:1rem auto auto auto;}}
        
    .services .thumbnail {margin-bottom:7rem;}
    
        .services .thumbnail img {width:100%; margin-bottom:1rem;}

        .services .thumbnail h4 {margin-bottom:1rem; color:var(--green);}

        .services .thumbnail p {font-size:1.6rem; margin-bottom:1.5rem;}

        .services .thumbnail a {padding:1rem 3rem;}


/*-- Expereince--*/

.experience {padding:10rem 0 5rem 0;}
@media (min-width: 768px) {.experience {padding:8rem 8rem 5rem 8rem;}}

    .experience .title {margin-bottom:6rem;}

        .experience .title h2 {width:95%; margin:1.5rem auto 2rem auto;}
        @media (min-width: 768px) {.experience .title h2 {width:75%;}}

        .experience .title p {padding:0 2rem;}

    .experience .thumbnail {margin-bottom:6rem;}

        .experience .thumbnail p {font-size:1.8rem;}

        .experience .thumbnail img {height:6rem; margin-bottom:1.5rem;}
        @media (min-width: 768px) {.experience .thumbnail img {height:5rem;}}


/*-- Transformation --*/

.transform {margin:5rem auto 0 auto;}

.transform .title {margin-bottom:5rem; padding:0 2rem;}

    .transform .title h2 {width:75%; margin:1.5rem auto;}
    @media (min-width: 768px) {.transform .title h2 {width:100%;}}

    .transform .title p {width:90%; margin:1.5rem auto;}
    @media (min-width: 768px) {.transform .title p {width:35%; margin:1.5rem auto;}}

.transform .tile {padding:0!important; margin:0!important}

    .transform .tile h5 {font-size:2.5rem; margin-bottom:1.5rem;}
    @media (min-width: 768px) {.transform .tile h5 {font-size:2rem;}}

    .transform .tile hr {border:none; height:4px; background-color:var(--white); width:40%;}

    .transform .tile p {margin-top:1.5rem; color:var(--white);}

        .transform .t-full {position:relative; height:85rem;}
        @media (min-width: 768px) {.transform .t-full {position:relative; height:60rem;}}

            .transform .t-full .textbox {padding:57rem 5rem 4.5rem 5rem;}
            @media (min-width: 768px) {.transform .t-full .textbox {padding:37.2rem 3rem 4.5rem 3rem;}}
            
            .transform .t-full img {position:absolute; z-index:-1; top:0; left:0; width:100%; height:auto;}

            .transform .t-full h5 {color:var(--white);}

        .transform .t-half .textbox {background-color:var(--green); padding:6rem 5rem 8rem 5rem; margin-top:-.5rem;}
        @media (min-width: 768px) {.transform .t-half .textbox {background-color:var(--green); padding:2.75rem 3rem 3.75rem 3rem; margin-top:-.5rem;}}

            .transform .t-half hr {background-color:var(--light-green);}

            .transform .t-half img {width:100%; height:auto; margin:0!important;}

    

/*--------------------------------- About Page -----------------------------------*/

/*-- About Header */

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

.about-header .textbox {margin:15rem 0 9rem 0;}
@media (min-width: 768px) {.about-header .textbox {margin:18rem 0 11rem 0;}}

.about-header .textbox h5 {width:70%; margin:auto;}

.about-header .textbox h1 {width:90%; margin:1rem auto;}
@media (min-width: 768px) {.about-header .textbox h1 {width:70%; margin:1rem auto;}}


/*-- Team --*/

.team {background-color:var(--pale);}

.team .title h2 {width:100%; margin:auto; margin-top:1rem;}
@media (min-width: 768px) {.team .title h2 {width:70%; margin:auto;}}


/*-------------------------------- New Patients ----------------------------------*/

.insurance {padding:5rem 0; background-color:var(--green);}
@media (min-width: 768px) {.insurance {padding:10rem 0;}}

.insurance h2, .insurance p {color:var(--white); width:100%; margin:1rem auto;}
@media (min-width: 768px) {.insurance h2, .insurance p {color:var(--white); width:58%; margin:1rem auto;}}


/*----------------------------- Schedule Appointment -----------------------------*/

    .schedule .textbox {margin:15rem auto 5rem auto; padding:0 5rem 5rem 5rem; border-bottom:var(--green) 1.5px solid;}
    @media (min-width: 768px) {.schedule .textbox {margin:7rem auto 5rem auto; padding:0 10rem; border-right:var(--green) 1.5px solid; border-bottom:none;}}

        .schedule .textbox h2 {margin-bottom:0rem;}

    .schedule .sidebar {padding:0 0 5rem 0;}
    @media (min-width: 768px) {.schedule .sidebar {padding-top:5rem;}}

        .schedule .sidebar .location {padding:4rem;}

        .schedule .sidebar h4 {margin-bottom:1rem; color:var(--green);}

        .schedule .sidebar span {font-size:1.3rem;}

        .schedule .sidebar a {display:block; margin-bottom:.5rem; font-size:1.6rem; color:var(--black)}

    .schedule .featured-articles {margin-top:4rem; margin-bottom:0rem;}
    @media (min-width: 768px) {.schedule .featured-articles {margin-top:4rem; margin-bottom:10rem;}}

    .schedule .featured-articles .tile {margin-bottom:4rem;}

        .schedule .featured-articles img {width:100%;}

        .schedule .featured-articles p {font-weight:700; margin:1rem auto;}

        .schedule .featured-articles a {color:var(--green); text-decoration:underline; font-weight:700; font-size:1.6rem;}

        .schedule .featured-articles a:hover, .schedule .featured-articles a:active,
        .schedule .sidebar a:hover, .schedule .sidebar a:active {color:var(--light-green); transition:.2s;}

    
    /*---------------------------------------- Blog -----------------------------------------*/


    /*-- Blog Header */

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

    .blog-header .textbox {margin:15rem 0 9rem 0;}
    @media (min-width: 768px) {.blog-header .textbox {margin:16rem 0 9rem 0;}}

    .blog-header .textbox {padding-left:3rem;}
    @media (min-width: 768px) {.blog-header .textbox {padding-left:10rem;}}

    .blog-header .textbox h1 {margin:1rem auto;}

    /*-- Blog Menu --*/

    .blog-menu {padding:5rem 3rem;}
    @media (min-width: 768px) {.blog-menu {padding:5rem 10rem;}}

        .blog-menu .thumbnail {margin-bottom:5rem;}

            .blog-menu .thumbnail img {width:100%;}

            .blog-menu .thumbnail .blog-title {display:block; font-size:1.8rem; font-weight:700; margin:1rem 0; color:var(--black)}

            .blog-menu .thumbnail .read-article {color:var(--green); text-decoration:underline; font-weight:700; font-size:1.5rem;}

            .blog-menu .read-article:hover,  .blog-menu .read-article:active,
            .blog-menu .read-article:hover,  .blog-menu .read-article:active {color:var(--light-green); transition:.2s;}


    /*-- Article Header --*/

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

        .article-header .textbox {margin:12rem 0 6rem 0; padding-left:3rem;}
        @media (min-width: 768px) {.article-header .textbox {margin:22rem 0 15rem 0; padding-left:7rem;}}

            .article-header .textbox h5 {font-size:1.6rem;}
            @media (min-width: 768px) {.article-header .textbox h5 {font-size:2rem;}}

            .article-header .textbox h1 {margin:1rem auto; font-size:3rem;}
            @media (min-width: 768px) {.article-header .textbox h1 {font-size:4rem;}}

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

            .article-header .imgbox img {width:100%; margin-top:5rem;}
            @media (min-width: 768px) {.article-header .imgbox img {width:90%; margin-top:10rem;}}

    
    /*-- Article Body --*/

    .article-body {width:90%; margin:7rem auto;}
    @media (min-width: 768px) {.article-body {width:70%;}}

    .article-body ol {margin:2rem 3rem;}

    .article-body ol li {font-size:1.8rem; margin-bottom:1rem;}

    .article-body img {width:50%; height:auto; margin:2rem auto;}

    .article-body h4 {color:var(--green); margin:2rem 0;}



    /*---------------------------------- Conditions ---------------------------------------*/


    .condition {margin:5rem auto 8rem auto;}

    .condition .sidebar {padding:5rem 3rem 0rem 1rem;}
    @media (min-width: 768px) {.condition .sidebar {padding:3rem 3rem 0 4rem;}}

        .condition .sidebar ul {list-style:none; font-size:1.5rem; margin-top:1.5rem;}

            .condition .sidebar ul li {margin-bottom:.5rem}

            .condition .sidebar ul li a {color:var(--black);}
            .condition .sidebar ul li a:hover {color:var(--green); transition:.2s;}

            .condition .sidebar ul li .bold {font-weight:700; color:var(--green);}


    .condition .textbox {border-bottom:var(--green) 1.5px solid; padding:10rem 1rem 5rem 1rem;}
    @media (min-width: 768px) {.condition .textbox {border-left:var(--green) 1.5px solid; padding:3rem 5rem; border-bottom:none;}}

        .condition .textbox h5 {
            display:inline-block;
            padding:.5rem 2rem;
            background-color:var(--light-green);
            border-radius:30px;
            color:var(--white);
            font-size:1.3rem;
            margin-bottom:2rem;
        }

        .condition .textbox h1 {margin-bottom:2rem;}

        .condition .textbox h4 {color:var(--green); margin-bottom:2rem;}

        .condition .textbox p {margin-bottom:2rem;}

        .condition .textbox ul {margin-left:3rem; margin-bottom:2rem;}

        .condition .textbox ul li {font-size:1.8rem; margin-bottom:1rem;}

        .condition .highlight {
            padding:3rem;
            background-color:hsla(85, 54%, 51%, 0.199);
            border-radius:15px;
            margin-bottom:3rem;
            margin-top:1rem;
        }

        .condition .highlight h3 {color:var(--green); font-size:2.2rem; width:90%; margin-bottom:2rem;}
        @media (min-width: 768px) {.condition .highlight h3 {width:80%; font-size:3rem;}}

        .condition .highlight ul li {font-size:1.8rem; margin-bottom:1.5rem; margin-left:0rem !important; width:90%;}
        @media (min-width: 768px) {.condition .highlight ul li {font-size:1.8rem; margin-bottom:1.5rem; width:95%;}}

        .condition span {font-size:1.5rem;}


/*------------------------------------------ Services ------------------------------------------*/

#service--testing .full-service-header .textbox h1 {width:90%; margin:1rem auto;}
@media (min-width: 768px) {#service--testing .full-service-header .textbox h1 {width:45%; margin:1rem auto;}}

#service--testosterone .service-img-header .textbox h1 {width:100%;}
@media (min-width: 768px) {#service--testosterone .service-img-header .textbox h1 {width:60%;}}

#service--thyroid .service-img-header .textbox h1 {width:100%;}
@media (min-width: 768px) {#service--thyroid .service-img-header .textbox h1 {width:60%;}}

/*-- Preventative Care Comparision --*/

.prevent-comp {background-color:var(--pale); padding:10rem 1rem;}
@media (min-width: 768px) {.prevent-comp {padding:10rem;}}

    .prevent-comp .title h2 {width:100%; margin:auto; margin-bottom:1.5rem;}
    @media (min-width: 768px) {.prevent-comp .title h2 {width:80%;}}

    .prevent-comp .title p {width:100%; margin:auto; margin-bottom:6rem;}
    @media (min-width: 768px) {.prevent-comp .title p {width:50%;}}

    .prevent-comp .listbox.left {border-bottom:var(--black) 1.5px solid; padding-left:0; padding-bottom:5rem;}
    @media (min-width: 768px) {.prevent-comp .listbox.left {border-right:var(--black) 1.5px solid; border-bottom:none;}}

    .prevent-comp .listbox.right {border-top:var(--black) 1.5px solid; padding-left:0rem; padding-top:5rem;}
    @media (min-width: 768px) {.prevent-comp .listbox.right {border-left:var(--black) 1.5px solid; padding-left:5rem; padding-top:0; border-top:none;}}
    
        .prevent-comp .listbox h3 {font-size:3.5rem; margin-bottom:3rem;}

        .prevent-comp .listbox ul {list-style:none; margin-bottom:2rem;}

            .prevent-comp .listbox ul li {font-size:1.8rem; margin-bottom:.5rem;}
            @media (min-width: 768px) {.prevent-comp .listbox ul li {font-size:1.5rem;}}

        .prevent-comp .listbox p {font-size:1.8rem; color:var(--green); text-decoration:underline; font-weight:700; margin-bottom:2rem;}
        @media (min-width: 768px) {.prevent-comp .listbox p {font-size:1.5rem;}}

        .prevent-comp .listbox img {height:1.6rem; margin-right:1rem;}


/*-- Beneftis --*/

.benefits h2 {width:100%; margin:auto; font-size:3rem;}
@media (min-width: 768px) {.benefits h2 {width:70%; font-size:4.7rem;}}

.benefits .title p {width:100%; margin:2rem auto 0 auto;}
@media (min-width: 768px) {.benefits .title p {width:40%; margin:2rem auto 0 auto;}}

/*-- Test Options --*/

.test-options {padding:10rem 0rem;}
@media (min-width: 768px) {.test-options {padding:8rem 5rem;}}

    .test-options .row {margin:0;}

        .test-options .textbox {margin-bottom:7rem;}

            .test-options .textbox p {margin-bottom:2rem !important;}


/*-- Test Benefits --*/

.test-benefits {background-color:var(--green); padding:10rem 3rem;}

    .test-benefits .textbox h3 {color:var(--white); margin-bottom:1.5rem;}

    .test-benefits .textbox p {color:var(--white); margin-bottom:1.5rem;}

    .test-benefits .listbox {margin-top:10rem;}
    @media (min-width: 768px) {.test-benefits .listbox {margin-top:0rem;}}

        .test-benefits .listbox img {height:2.5rem;}

            .test-benefits .listbox .text {padding-left:3rem; margin-bottom:4rem;}

                .test-benefits .listbox .text h4 {color:var(--white); margin-bottom:1rem;}

                .test-benefits .listbox .text p {color:var(--white); font-size:1.6rem;}