/*//// OFFSET SCROLL TARGET FOR FIXED HEADER ////*/
:target::before {
    content: "";
    display: block;
    height: 17rem; /* FIXED HEADER HEIGHT*/
    margin: -17rem 0 0 0; /* NEGATIVE FIXED HEADER HEIGHT */
}





/*//// HERO SECTION ////*/
section.page-hero-section {
    height: auto;
}

section.page-hero-section div.page-hero-container {
    height: 85rem;
    /* min-height: calc(100dvh - var(--var-header-height)); */
    /* background-size: 100% auto; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right;
}

section.page-hero-section h1,
section.mobile-page-hero-section h1 {
    transition: all ease .4s;
    opacity: 0;
    transform: translateY(-8px);
}
section.page-hero-section h1.animated,
section.mobile-page-hero-section h1.animated {
    position: relative;
    width: 100%;
    color: #FFF;
    font-family: 'Frank Ruhl Libre';
    font-size: 8.7847rem;
    font-style: normal;
    font-weight: 300;
    line-height: 8.3223rem; /* 94.737% */
    line-height: 7.8rem; /* 94.737% */    
    letter-spacing: -0.1875rem;
    opacity: 1;
    transform: none;    
}
section.page-hero-section h1 span,
section.mobile-page-hero-section h1 span { 
    padding-left: 10rem;
}
section.page-hero-section div.headline-container,
section.mobile-page-hero-section div.headline-container {
    position: absolute;
    top: 32%;
    left: 5.5rem;
}
section.page-hero-section h1:after,
section.mobile-page-hero-section h1:after {
    position: absolute;
    top: -3rem;
    left: -1rem;
    content: "";
    width: 0.5rem;
    height: 5.0172rem;
    width: 0.6rem;
    height: 5rem;
    background: #D04F53;
    opacity: 0;
    transition: all ease .3s;
    transition-delay: .4s;
}
section.page-hero-section h1.animated:after,
section.mobile-page-hero-section h1.animated:after {
    position: absolute;
    top: -1.7rem;
    opacity: 1;
}





/*// SCROLL DOWN HERO ARROW //*/
a.hero-section-arrow {
    position: absolute;
    top: 90.5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    cursor: pointer;
}
a.next-section-link img {
    width: 4.5rem;
    height: auto;
}




/*//// OUR MISSION SECTION ////*/
section.mission-section {
    padding: 0 4rem;
    overflow: hidden;
    background-color: #ffffff;
}
section.mission-section div.mission-container {
    padding: 12rem 4rem 12rem 41rem;
    background: #F9F9F9;
}
div.mission-container h2 {
    position: relative;
    z-index: 100;
    color: #675F60;
    font-size: 8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
div.mission-container h2:after {
    position: absolute;
    top: 0rem;
    left: -1.5rem;
    z-index: 99;
    content: "";
    width: 0.6rem;
    height: 6.6rem;
    background: #D04F53;
}
div.mission-container h2:before {
    position: absolute;
    top: -7.5rem;
    left: -48.1rem;
    z-index: -1;
    content: "Our Mission";
    color: rgba(183, 183, 183, 0.40);
    font-size: 13.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-wrap: nowrap;
    white-space: nowrap;    
}
div.mission-container p.mission-paragraph {
    color: #675F60;
    font-size: 4.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .3s ease, transform .3s ease;
}
div.mission-container p.mission-paragraph.animate {
    transform: none;
    opacity: 1;
}





/*////// GRANULAR RESPONSIVE //////*/
@media only screen and (max-width: 1440px) {

        /*//// HERO SECTION ////*/
        /*// DYNAMIC HERO IMAGE HEIGHT //*/
        section.page-hero-section div.page-hero-container { height: calc( 100dvh - 13.5rem ); }

}

/*////// HOVER STATES //////*/
@media only screen and (min-width: 1024px) and (hover: hover) {

        /*//// MEET OUR TEAM SECTION ////*/
        div.team-flex-item:hover { box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; }
        /*div.team-flex-item:hover p { max-height: 70rem; }*/
        div.team-flex-item:hover img.team-arrow-down { transform: translateY(10px); }
}

/*// MOBILE SCREEN //*/
@media only screen and (max-width: 1024px) {

        div.page-container { overflow: hidden; }

        /*//// HERO SECTION ////*/
        #page-hero-container { height: 45dvh; }
  

        /*//// MISSION SECTION ////*/
        section.mission-section div.mission-container { padding: 8rem 4rem 10rem 12rem; }
        div.mission-container h2 { font-size: 5rem; }
        div.mission-container p.mission-paragraph { font-size: 2.8rem; }


        /*//// OUR PRACTICE SECTION ////*/
        #full-practice-flex-item { padding: 3rem 0 3rem 12rem; }
        #full-practice-flex-item h2 { font-size: 5rem; }
        #full-practice-flex-item h2:after { top: -3.6rem; left: 23rem; font-size: 11rem; }
        #left-practice-flex-item { }
        #right-practice-flex-item { padding: 0 2rem 0 0; }
        #right-practice-flex-item h3 { font-size: 3.2rem; }
        #right-practice-flex-item p.practice-paragraph { font-size: 2rem; }


        /*//// MEET OUR TEAM SECTION ////*/
        section.team-section div.team-container { height: auto; }
        div.team-container div.team-flex-container { justify-content: space-around; }
        div.team-flex-container div.team-flex-item { max-width: 40%; }
        div.team-flex-item h3 { font-size: 2.2rem; }
        div.team-flex-item h4 { font-size: 1.4rem; }

        /*// ARROWS //*/
        div.left-previous-arrow { left: -2rem; }
        div.right-next-arrow { right: -2rem; }


        /*//// LOCATION SECTION ////*/
        section.location-section div.location-container { padding: 6rem 4rem 8rem 16rem; }    

}

/*// SMALL MOBILE //*/
@media only screen and (max-width: 851px) { 

        /*//// MOBILE HERO SECTION ////*/
        #page-mobile-hero-container { height: 45dvh; background-size: cover; background-repeat: no-repeat; 
            background-position: bottom right;
        }
        /*// MOBILE HEADLINE //*/
        #page-mobile-hero-container div.headline-container { }
        #page-mobile-hero-container h1 { font-size: 6rem; line-height: .94; }
      

        /*//// MISSION SECTION ////*/
        section.mission-section div.mission-container { padding: 8rem 4rem 10rem 12rem; }
        div.mission-container h2 { font-size: 5rem; }
        div.mission-container p.mission-paragraph { font-size: 2.8rem; }


        /*//// OUR PRACTICE SECTION ////*/
        #practice-banner { height: 10rem; background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 50%; 
            background-image: url('https://griffin2dev.wpenginepowered.com/wp-content/uploads/2023/12/griffin-north-america-lights.png');
            opacity: .8;
        }
        #full-practice-flex-item { padding: 3rem 0 3rem 12rem; }
        #full-practice-flex-item h2 { font-size: 5rem; }
        #full-practice-flex-item h2:after { top: -3.6rem; left: 23rem; font-size: 11rem; }
        #left-practice-flex-item { display: none; }
        #right-practice-flex-item { padding: 8rem 2rem; }
        #right-practice-flex-item h3 { font-size: 3.2rem; }
        #right-practice-flex-item p.practice-paragraph { width: 75%; margin: 0.5rem 0 8rem 0; font-size: 2rem; }


        /*//// MEET OUR TEAM SECTION ////*/
        section.team-section div.team-container { height: auto; }
        div.team-container div.team-flex-container { justify-content: flex-start; }
        div.team-flex-container div.team-flex-item { max-width: 40%; /*min-height: 52rem;*/ }
        div.team-flex-container div.team-flex-item { background: linear-gradient(0deg, #FAFAFA 20%, rgba(217, 217, 217, 0.00) 60%); }
        /*// MODALS //*/
        div.modal-flex-container { justify-content: flex-start; }


        /*//// LOCATION SECTION ////*/
        section.location-section div.location-container { padding: 6rem 4rem 8rem 16rem; }        

} 
@media only screen and (max-width: 480px) { 

        /*//// MOBILE HERO SECTION ////*/
        #page-mobile-hero-container { height: 45dvh; background-size: 100% auto; }
        #page-mobile-hero-container div.headline-container { top: 50%; }
        #page-mobile-hero-container h1 { font-size: 4.8rem; line-height: .94; }


        /*//// MISSION SECTION ////*/
        section.mission-section div.mission-container { padding: 8rem 2rem 10rem 2rem; }
        div.mission-container h2 { font-size: 4rem; }
        div.mission-container h2:after { top: -1.7rem; height: 5.5rem; }
        div.mission-container p.mission-paragraph { font-size: 2.4rem; }
        div.mission-container p.mission-paragraph br { display: none; }

        /*// OVER-RIDE ANIMATION //*/
        div.mission-container p.mission-paragraph { transform: none !important; opacity: 1 !important; }


        /*//// OUR PRACTICE SECTION ////*/
        #full-practice-flex-item { padding: 3rem 0 3rem 2rem; }
        #right-practice-flex-item { padding: 8rem 0rem 8rem 6rem; }
        #full-practice-flex-item h2 { font-size: 4rem; }
        #full-practice-flex-item h2:before { top: -1.7rem; height: 5.5rem; }
        /*#full-practice-flex-item h2:after { top: -3.6rem; left: 4rem; }*/
        #right-practice-flex-item p.practice-paragraph { width: 90%; font-size: 2.2rem; }


        /*//// MEET OUR TEAM SECTION ////*/
        div.team-flex-container div.team-flex-item { /*max-width: 90%;*/ max-width: 99%; }
        div.team-flex-item img.team-portrait { /*width: 21rem;*/ width: 65%; }
        div.team-flex-item h3 { font-size: 3.8rem; }
        div.team-flex-item h4 { font-size: 1.75rem; }
        div.team-flex-item p { margin-top: 1.8rem; max-height: 12.5rem; font-size: 2rem; }
        iv.team-member-slide { padding: 5rem 5rem 8rem 3rem; }
        img.team-arrow-down { bottom: 3rem; bottom: 5rem; }

        /*// MODALS //*/
        .modal-box { width: 85%; max-height: 66dvh; overflow-y: scroll; }
        .modal-box.view { top: 55%; }
        div.modal-flex-container { justify-content: flex-start; }
        div.modal-flex-item-full h3 { font-size: 3.8rem; }
        div.modal-flex-item-full h4 { font-size: 1.4rem; }
        div.modal-flex-item-left img { width: 60%; }
        div.modal-flex-item-right { padding: 2rem 0; }
        div.modal-flex-item-right p { font-size: 2rem; }
        .modal-flex-item-right ul, 
        .modal-flex-item-right ul li { font-size: 2rem; }


        /*//// LOCATION SECTION ////*/
        section.location-section div.location-container { padding: 6rem 4rem 8rem 8rem; }
        div.location-flex-item address,
        div.location-flex-item phone { font-size: 1.8rem; }

}
@media only screen and (max-width: 380px) { 

        /*//// MOBILE HERO SECTION ////*/
        #page-mobile-hero-container { height: 40dvh; background-size: 100% auto; }
        #page-mobile-hero-container div.headline-container { top: 55%; left: 3.8rem }
        #page-mobile-hero-container h1 { font-size: 4.2rem; }        


        /*//// MISSION SECTION ////*/
        section.mission-section { padding: 0 2rem; }
        div.mission-container h2 { font-size: 3.6rem; }
        div.mission-container p.mission-paragraph { font-size: 2.2rem; }
        div.mission-container p.mission-paragraph br { display: none; }


        /*//// OUR PRACTICE SECTION ////*/
        section.team-section div.team-container { padding: 0 2rem; }
        #right-practice-flex-item { padding: 6rem 0rem 8rem 3rem; }
        #right-practice-flex-item h3 { font-size: 3rem; }
    

        /*//// MEET OUR TEAM SECTION ////*/
        div.team-flex-item p { max-height: 13rem; /*font-size: 1.8rem;*/ }
        div.team-flex-item h3 { font-size: 3.4rem; }
        /*// MODAL //*/
        .modal-box { padding: 2rem 2rem 4rem 2rem; }
        div.modal-flex-item-full h3 { font-size: 3.3rem; }


        /*//// LOCATION SECTION ////*/

}
@media only screen and (max-width: 360px) { }
@media only screen and (max-width: 320px) { }



/*//// LANDSCAPE STYLES ////*/
@media screen and (max-width: 851px) and (orientation: landscape) {
    
        /*//// MOBILE HERO SECTION ////*/
        #page-mobile-hero-container { height: calc( 140dvh - 13.5rem ); }

        div.mission-container p.mission-paragraph { font-size: 2.4rem; }
        div.mission-container p.mission-paragraph br { display: none; }

        /*// MODAL //*/
        .modal-box { max-height: 66dvh; overflow-y: scroll; }
        .modal-box.view { top: 62%; }

}
@media screen and (max-width: 815px) and (orientation: landscape) { }
@media screen and (max-width: 667px) and (orientation: landscape) { }
@media screen and (max-width: 570px) and (orientation: landscape) { }