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

.index-header {height:60rem; margin-top:10rem;}
@media (min-width: 768px) {.index-header {height:50rem; margin-top:30rem; background-size:cover;}}

.index-header video {
    position:relative;
    margin-top:0rem;
    height:auto;
    width:100%;
    z-index:-1;
}

@media (min-width: 768px) {.index-header video {margin-top:-27rem !important;}}

.index-header .textbox {
    position:absolute;
    background-color:var(--lightred);
    top:34.5rem;
    left:50%;
    transform:translate(-50%,0%);
    width:100%;
    padding:5rem 3rem;
}

@media (min-width: 768px) {.index-header .textbox {top:17.5rem; left:50%;  background-color:#ffffff00;}}

    .index-header .textbox h1 {
        color:#1B2627;
        font-size:3.5rem;
        line-height:1.2;
        margin-bottom:1.5rem;
    }

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

    .index-header .textbox p,
    .index-header .textbox p a {
        color:#1B2627;
        width:98%;
        margin-bottom:2rem;
        text-decoration:none;
        font-size:1.8rem;
    }

    @media (min-width: 768px) {.index-header .textbox p, .index-header .textbox p a {color:#fff; width:35%; margin:0 auto 2rem auto;}}

    .index-header .textbox button {
        display:inline-block;
        font-family:'Poppins', sans-serif;
        padding:1.55rem 2.5rem;
        margin-right:1rem;
        margin-bottom:1.7rem;
        text-decoration:none; 
        font-size:1.8rem;
        letter-spacing: .1rem; 
        width:50%;
        text-align:center;
        border-radius: 1.5px; 
        border:none;
        cursor:pointer;
        background-color:#0a375a;
        border:#1B2627 solid 1.5px;
        color:#fff;
    }

    @media (min-width: 768px) {.index-header .textbox button {font-size:1.5rem; padding:1rem 2rem; width:auto; border:#fff solid 1.5px; color:#fff;}}

    .index-header .textbox button:hover,
    .index-header .textbox button:active {
        background-color:#0a375a;
        transition:.2s;
    }

/*-- Welcome --*/

.welcome-bkgd {background-color:#fff; margin-top:0rem;}
@media (min-width: 768px) {.welcome-bkgd {margin-top:-20rem;}}


.welcome-bkgd .welcome {margin-bottom:5rem; padding:5rem 1rem 4rem 1rem;}
@media (min-width: 768px) {.welcome-bkgd .welcome {margin-bottom:5rem; padding:8rem 7.5rem 3rem 7.5rem;}}



.welcome {margin-bottom:5rem; padding:5rem 1rem 4rem 1rem;}
@media (min-width: 768px) {.welcome {margin-bottom:5rem; padding:5rem 7.5rem;}}

    .welcome .textbox h2 {width:100%;}
    @media (min-width: 768px) {.welcome .textbox h2 {width:80%;}}

    .welcome .textbox p {width:100%;}
    @media (min-width: 768px) {.welcome .textbox p {width:88%;}}

    .welcome img {width:100%; margin-bottom:2rem;}
    @media (min-width: 768px) {.welcome img {width:85%; margin-bottom:0;}}


/*-- Locations --*/

.locations {padding:8rem 1rem;}
@media (min-width: 768px) {.locations {padding:8rem 10rem 9rem 10rem;}}

        .locations .title h2 {margin-bottom:2.5rem; width:100%;}
        @media (min-width: 768px) {.locations .title h2 {margin-bottom:2.5rem; width:40%;}}

        .locations .tile {
            background-color:var(--white);
            border:var(--grey) 2px solid;
            border-radius:1rem;
            margin:1rem;
            padding:2rem;
        }

            .locations .tile h4 {margin-bottom:1rem;}

            .locations .tile a {display:block; text-decoration:none; color:var(--grey); font-size:1.7rem;}
            @media (min-width: 768px) {.locations .tile a {font-size:1.4rem;}}

            .locations .tile a:hover,
            .locations .tile a:active {color:var(--red); transition:.2s;}

            .locations .tile a.address {margin-bottom:.5rem;}

            .locations .tile a.phone {margin-bottom:1.25rem;}

            .locations .tile a.details {color:var(--red); font-weight:600; text-decoration:underline; font-size:1.3rem;}

            .locations .tile a.details:hover,
            .locations .tile a.details:active {color:var(--grey); transition:.4s;}



/*------- ABOUT ------*/

.about-header {position:relative;}

        .about-header img {position:absolute; top:7rem; left:0; height:auto; width:100vw;}
        @media (min-width: 768px) {.about-header img {top:0;}}

        .about-header .textbox {margin-top:30rem;}
        @media (min-width: 768px) {.about-header .textbox {margin-top:19.5rem;}}

            .about-header .textbox h1 {color:var(--grey); width:100%; margin:0 auto 2rem auto; line-height:1;}
            @media (min-width: 768px) {.about-header .textbox h1 {color:var(--white); width:55%;}}

             .about-header .textbox p {color:var(--grey); font-size:1.8rem; width:100%; margin:0 auto 0rem auto;}
             @media (min-width: 768px) {.about-header .textbox p {color:var(--white); font-size:1.8rem; width:40%; margin:0 auto 12rem auto;}}


/*-- Healing Pain Differently --*/

.healing-pain-differently {padding:8rem 3.5rem;}
@media (min-width: 768px) {.healing-pain-differently {padding:8rem 10rem 7rem 10rem;}}

        .healing-pain-differently .title h3 {margin-bottom:2.5rem; width:100%;}
        @media (min-width: 768px) {.healing-pain-differently .title h3 {margin-bottom:2rem; width:100%;}}

        .healing-pain-differently .tile {
            background-color:var(--white);
            border:var(--grey) 2px solid;
            border-radius:1rem;
            margin:1rem;
            padding:2rem;
        }

            .healing-pain-differently .tile h4 {margin-bottom:1rem;}

/*-- About Video --*/

.about-video {margin-bottom:8rem;}
@media (min-width: 768px) {.about-video {margin-bottom:10rem;}}

.about-video video {height:100%; width:100%; margin:auto;}
@media (min-width: 768px) {.about-video video {height:100%; width:80%; margin:auto;}}

/*-- Team --*/

.team {margin:8rem auto; padding:0 4rem;}
@media (min-width: 768px) {.team {padding:0 10rem;}}

    .team .title h2 {font-size:3.5rem; width:100%; margin:0 auto 3rem auto;}
    @media (min-width: 768px) {.team .title h2 {width:50%; margin:0 auto 3rem auto;}}

    .team .tile {margin:2rem auto;}

    .team .tile img {height:auto; width:100%; margin-bottom:1rem;}


/*-- PRP Value --*/

.prp-value {padding:0 2rem; margin-bottom:7.5rem;}
@media (min-width: 768px) {.prp-value {padding:0 10rem; margin-bottom:2.5rem;}}

    .prp-value .tile {
        background-color:var(--white);
        border:var(--grey) 2px solid;
        border-radius:1rem;
        margin:1.5rem;
        padding:2rem;
    }

        .prp-value .tile .imgbox {position:relative;}

            .prp-value .tile .imgbox img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:70%; height:auto;}

        .prp-value .tile .textbox p {
            font-size:1.8rem;
            font-weight:400;
        }


/*-- PRP What To Expect --*/

.prp-wte {background-color:var(--lightred); padding:5rem 0rem;}
@media (min-width: 768px) {.prp-wte {padding:7.5rem 12rem;}}

        .prp-wte .title h2 {margin:0 auto 1rem auto; width:100%; font-size:3.5rem;}
        @media (min-width: 768px) {.prp-wte .title h2 {margin:0 auto 4rem auto; width:50%; font-size:3.5rem;}}

        .prp-wte .row {margin-bottom:5rem;}
        @media (min-width: 768px) {.prp-wte .row {margin-bottom:4rem;}}

            .prp-wte .imgbox img {width:95%; height:auto; margin-bottom:1.5rem;}
            @media (min-width: 768px) {.prp-wte .imgbox img {width:95%; height:auto; margin-bottom:0;}}

            .prp-wte .textbox {padding-left:1.2rem;}
            @media (min-width: 768px) {.prp-wte .textbox {padding-left:3rem;}}

                .prp-wte .textbox h3 {margin:0 auto 1rem 0;}
                @media (min-width: 768px) {.prp-wte .textbox h3 {margin:0 auto 1.5rem 0;}}


/*-- Types of Injections --*/

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

        .injections .title h3 {margin-bottom:2.5rem; width:100%;}
        @media (min-width: 768px) {.injections .title h3 {margin:0 auto 2.5rem auto; width:50%; line-height:1.2;}}

        .injections .tile {
            background-color:var(--white);
            border:var(--grey) 2px solid;
            border-radius:1rem;
            margin:1rem;
            padding:2rem;
        }

            .injections .tile h4 {margin-bottom:1rem;}


/*------------- HOW WE HELP -------------*/

.hwh-header {background-color:var(--lightred); margin-top:10rem; padding:5rem 0rem 7.5rem 0rem;}
@media (min-width: 768px) {.hwh-header {margin-top:12rem; padding:5rem 8rem 7.5rem 8rem;}}

        .hwh-header h1 {font-size:3.5rem; margin-bottom:1.5rem;}
        @media (min-width: 768px) {.hwh-header h1 {font-size:5rem; margin-bottom:1.5rem;}}

        .hwh-header p {margin-bottom:1.5rem; width:100%;}
        @media (min-width: 768px) {.hwh-header p {width:90%;}}

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

        .hwh-header .play-btn {
            height:9rem;
            width:auto;
            position:absolute;
            top:45%;
            left:37%;
            animation: pulse 1.5s infinite;
            cursor:pointer;
        }

        @media (min-width: 768px) {.hwh-header .play-btn {
            height:10rem;
            top:60%;
            left:43%;
        }}

        @keyframes pulse {
            0% {
            transform: scale(0.9);
            }
        
            50% {
                transform: scale(1);
            }
        
            100% {
                transform: scale(0.9);
            }
        }

        /* The Modal (background) */
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            padding-top: 15rem;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%; 
            overflow: auto;  
            background-color: rgba(13, 13, 13, 0.918); 
            animation: fadeIn .5s;
        
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        /* Modal Content */
        .modal-content img {
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                margin: auto;
                height:auto;
                width:80%;
        }

        @media (min-width: 768px) {.modal-content img { height:70%; width:auto;}}

        .modal-content video {
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            margin: auto;
            height:25rem;
            width:100%;
        }

        @media (min-width: 768px) {.modal-content video {height:80%; top:52%; width:70%;}}


/*-- Types of Injuries--*/

.injuries {padding:5rem 3.5rem;}
@media (min-width: 768px) {.injuries {padding:7.5rem 10rem 10rem 10rem;}}

        .injuries .title h2 {margin-bottom:2.5rem; width:100%; font-weight:500;}
        @media (min-width: 768px) {.injuries .title h2 {margin:0 auto 3rem auto; width:50%; line-height:1.2;}}

        .injuries .tile {
            background-color:var(--white);
            border:var(--grey) 2px solid;
            border-radius:1rem;
            margin:1rem;
            padding:2rem;
        }

            .injuries .tile h4 {margin-bottom:1rem;}

            .injuries .tile p {font-style:italic;}


/*------ Network Partners -------*/

.np-header {margin-top:7rem; background-color:var(--lightred);}

        .np-header .title {padding:8rem 3rem 6rem 3rem;}
        @media (min-width: 768px) {.np-header .title {padding:10rem 15rem 8rem 15rem;}}

            .np-header .title h1 {width:100%; margin:0 auto 3rem auto;}
             @media (min-width: 768px) {.np-header .title h1 {width:80%; margin:0 auto 3rem auto;}}

            .np-header .tile {
                background-color:var(--white);
                border:var(--grey) 2px solid;
                border-radius:1rem;
                margin:.75rem 3rem;
                padding:2rem;
            }
            @media (min-width: 768px) {.np-header .tile {margin:1.5rem;}}

                .np-header .tile .imgbox {position:relative;}

                    .np-header .tile .imgbox img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:60%; height:auto;}
                     @media (min-width: 768px) {.np-header .tile .imgbox img {width:70%;}}

                .np-header .tile .textbox {text-align:left;}

                .np-header .tile .textbox p {font-size:1.8rem; font-weight:600;}
                @media (min-width: 768px) {.np-header .tile .textbox p {font-size:1.8rem; font-weight:400;}}


/*-- Helping You Help Your Patients --*/

.np-helping {margin-bottom:0rem; padding:4rem 1rem 2rem 1rem;}
@media (min-width: 768px) {.np-helping {margin:2rem auto; padding:2rem 8rem 4rem 8rem;}}

    .np-helping .textbox h2 {width:100%;}
    @media (min-width: 768px) {.np-helping .textbox h2 {width:80%;}}

    .np-helping .textbox p {width:100%; margin-bottom:2.5rem;}
    @media (min-width: 768px) {.np-helping .textbox p {width:88%; margin-bottom:1.5rem;}}

    .np-helping img {width:100%; margin-bottom:2rem;}
    @media (min-width: 768px) {.np-helping img {width:75%; margin-bottom:0;}}

/*-- Our Commitment --*/

.np-commit {padding:8rem 3.5rem; background-color:var(--lightred); margin-bottom:2rem;}
@media (min-width: 768px) {.np-commit {padding:8rem 10rem 9rem 10rem; margin-bottom:10rem;}}

        .np-commit .title h2 {margin:0 auto 2.5rem auto; width:100%; font-size:3.5rem;}
        @media (min-width: 768px) {.np-commit .title h2 {margin:0 auto 3rem auto;}}

        .np-commit .tile {
            background-color:var(--white);
            border:var(--grey) 2px solid;
            border-radius:1rem;
            margin:1rem;
            padding:2rem;
        }

            .np-commit .tile h4 {margin-bottom:.5rem;}

            .np-commit .tile p {font-size:1.4rem;}


/*------ Patient Resources -------*/

.pr-header {margin-top:7rem; background-color:var(--lightred); margin-bottom:3rem;}

        .pr-header .title {padding:8rem 1rem 6rem 1rem;}
        @media (min-width: 768px) {.pr-header .title {padding:10rem 15rem 8rem 15rem;}}

            .pr-header .title h1 {width:100%; margin:0 auto 1.5rem auto;}
            @media (min-width: 768px) {.pr-header .title h1 {width:80%; margin:0 auto 2rem auto;}}

            .pr-header .title p {font-size:1.8rem; width:100%; margin:auto;}
            @media (min-width: 768px) {.pr-header .title p {font-size:1.8rem; width:40%; margin:auto;}}


/*-- Schedule Appointment --*/

.schedule {padding:1rem 1rem;}
@media (min-width: 768px) {.schedule {padding:5rem 7rem 10rem 7rem;}}

    .schedule .textbox {padding:0 1rem 5rem 3rem;}
    @media (min-width: 768px) {.schedule .textbox {padding:3rem 10rem 0 0;}}

    .schedule .textbox a {color:var(--red); font-weight:500; text-decoration:none;}
    .schedule .textbox a:hover {color:var(--grey); transition:.4s;}

/*------ Thank You -------*/

.thank-you-header {margin-top:8rem; background-color:var(--lightred); margin-bottom:0rem;} 
@media (min-width: 768px) {.thank-you-header {margin-top:12rem;} }
            
    .thank-you-header .container {margin-bottom:0; padding:5rem 1rem 5rem 1rem;}
    @media (min-width: 768px) {.thank-you-header .container {padding:4rem 7.5rem 6rem 7.5rem;}}

        .thank-you-header .textbox h2 {width:100%;}
        @media (min-width: 768px) {.thank-you-header .textbox h2 {width:80%;}}

        .thank-you-header .textbox p {width:100%;}
        @media (min-width: 768px) {.thank-you-header .textbox p {width:88%;}}

        .thank-you-header img {width:100%; margin-bottom:2rem;}
        @media (min-width: 768px) {.thank-you-header img {width:85%; margin-bottom:0;}}