/*#region general*/

.h2White {
    color: var(--background);
    font-family: var(--headerFont);
    font-size: 3.8125rem;
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    text-transform: uppercase;
    letter-spacing: 10px;
    line-height: 1;
}
.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
}
/*#endregion*/

/*#region hero*/
#sectionHeroImage {   
    height: 100vh;
    overflow: hidden;
}
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#hero-1617 {
    padding: clamp(12.5rem, 25.95vw, 15em) 1rem clamp(10rem, 15vw, 15rem);
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: 100vh;
}
#hero-1617 .cs-container {
    width: 100%;
    max-width: 95rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}
#hero-1617 .cs-content {
    --cornerWidth: 6.75rem;
    --cornerHeight: 6.75rem;
    --cornerColor: var(--accentOne);   
    /*margin-top:61px;*/
    width: 100%;
    max-width: 90rem;   
    padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 5vw, 3rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    background: rgba(var(--primaryRGB),.9);
    background: rgba(var(--backgroundRGB),.9);
    background: rgba(9,38,51,.64);
}

#hero-1617 .cs-chevron {
    --chevronColor: var(--primary);
    width: 3rem;
    height: auto;
}

    #hero-1617 .cs-topper {
        /* 13px - 16px */
        font-family: var(--subHeaderFont);
        font-size: 0.8375rem;
        font-size: clamp(0.8375rem, 0.605rem + 1.1625vw, 2rem);
        line-height: 1.2em;
        font-weight: 400;
        letter-spacing: 2px;
        text-align: center;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        color: var(--accentOne);
        color: var(--background);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        position: relative;
    }

    #hero-1617 .cs-title {
        font-family: var(--headerFont);
        font-size: 1.6rem;
        font-size: clamp(1.6rem, 0.6rem + 4.5vw, 6rem);
        font-weight: 400;
        line-height: 1.2em;
        letter-spacing: 5px;
        color: var(--background);
        color: var(--primary);
        color: var(--background);
        text-align: center;
        max-width: 90rem;
        margin: 0 0 1rem 0;
        position: relative;
    }

    #hero-1617 .cs-text {
        font-size: 0.8375rem;
        font-size: clamp(0.8375rem, 0.605rem + 1.1625vw, 2rem);
        font-family: var(--subHeaderFont);
        line-height: 1.5em;
        letter-spacing: 1px;
        color: var(--primary);
        color: var(--background);
        text-align: center;
        width: 100%;
        /* 464px - 622px */
        max-width: clamp(29rem, 60vw, 38.785rem);
        margin: 0 auto 0;
        margin-bottom: 2rem;
    }

    #hero-1617 .cs-text-note {
        margin-top: 3rem;
        font-family: var(--subHeaderFont);
        color: var(--background);
        font-size: 1rem;
        font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
        max-width: 29rem;
        max-width: clamp(29rem, 22.8rem + 31vw, 60rem);
    }

        #hero-1617 .cs-button-solid {
            font-size: 1.15rem;
            font-size: clamp(1.15rem, 1.0799999999999998rem + 0.3500000000000001vw, 1.5rem);
            font-family: var(--headerFont);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            color: var(--background);
            text-decoration: none;
            text-align: center;
            margin: 0;
            min-width: 12.5rem;
            padding: 0 1.5rem;
            background-color: var(--accentOne);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
            transition: color 0.3s;
        }

    #hero-1617 .cs-button-solid:hover {
        color: var(--background);
    }

    #hero-1617 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: var(--secondary);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }

    #hero-1617 .cs-button-solid:hover:before {
        width: 100%;
    }
    #hero-1617 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
    }
    #hero-1617 .cs-background:before {
        /* Overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: #111926;
        opacity: 0.8;
        opacity:0;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
        /* prevents the cursor from interacting with it */
        pointer-events: none;
    }
    #hero-1617 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/* Large Desktop - Parallax Effect - 1600px */
@media only screen and (min-width: 100rem) {
    #hero-1617 {
        background: url('/img/default-home-image-barley.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        height:100vh;
    }

    #hero-1617 .cs-background img {
        /*display: none;*/
    }
}

/* adjust for short screens*/
@media screen and (max-height: 800px) {
    #hero-1617 {
        padding: clamp(12.5rem, 25.95vw, 15em) 1rem clamp(10rem, 15vw, 15rem);
        padding: 9rem 1rem 9rem; /* Adjust this value as needed */
    }
    #hero-1617 .cs-content { 
        padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 5vw, 3rem);
        padding: 2rem 
    }
}
@media (max-height: 800px) and (max-width: 1023px) {
    #hero-1617 {
        padding: 11.5rem 1rem 9rem;
    }
}
    /*#endregion*/
    /*#region practice areas*/
    #sectionPracticeAreas {
        background-color: var(--primary);
        /*
        background-image: url('/img/bkg_practice_areas-large.png');
        background-attachment:fixed;
        background-size: contain;
    */
        padding: 2rem 1rem;
        border-bottom: 1px solid rgba(0,0,0,0.2);
        width: 100%;
        overflow: hidden;
        min-height: 900px;
    }

    #praticeAreasInner {
        padding: 3rem 1rem;
    }

    #practiceAreasContent {
        position: relative;
    }

    #practiceAreasPhoto {
        padding-right: 2rem;
        position: relative;
        text-align: left;
    }

        #practiceAreasPhoto img {
            width: 100%;
        }

    #practiceAreasTopLineOuter {
        position: relative;
        text-align: right;
    }

    #practiceAreasRight {
        position: relative;
        padding-left: 3rem;
    }

        #practiceAreasRight h3 {
            font-family: var(--subHeaderFont);
            font-size: 1.5rem;
            font-size: clamp(1.5rem, 0.5285714285714285rem + 1.517857142857143vw, 2.35rem);
            font-weight: 400;
            line-height: 1;
            color: var(--accentOne);
            font-weight: 600;
        }

    #practiceAreasTextBox, .practiceAreasTextBox {
        position: absolute;
        width: 500px;
        right: -3rem;
        z-index: 5;
        top: 12rem;
        background: var(--background);
        padding: 2rem 5rem 2rem 2rem;
        font-size: 1.1875rem;
        color: var(--primary);
    }

    #practiceAreasTextBox, .practiceAreasTextBox {
        position: absolute;
        width: 485px;
        height: 370px;
        right: -6rem;
        z-index: 5;
        top: 5rem;
        top: 2rem;
        background: var(--background);
        padding: 2rem 2rem 2rem 2rem;
        font-size: 1rem;
        color: var(--primary);
    }

        .practiceAreasTextBox p {
            margin-top: 1.5rem;
        }

        .practiceAreasTextBox .fontBody {
            text-align: justify;
            word-spacing: -0.05em;
        }
        /*
    .practiceAreasTextBox a {
        color: var(--accentOne);
        font-weight:500;
        font-size:1.15rem;        
        line-height:1.25;
        text-transform:capitalize;
        border-bottom:1px solid var(--accentOne)
    }
    .practiceAreasTextBox a:hover, .practiceAreasTextBox a:focus, .practiceAreasTextBox a:active {
        color: var(--secondary);
        border-bottom: 1px solid var(--secondary)
    }
    */

        .practiceAreasTextBox a {
            font-size: 1rem;
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            line-height: 2.75rem;
            text-decoration: none;
            font-weight: 700;
            text-align: center;
            margin: 0;
            color: var(--background);
            min-width: 9.375rem;
            padding: 0 1rem;
            background-color: var(--accentOne);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
        }

            .practiceAreasTextBox a:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: var(--secondary);
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s;
            }

            .practiceAreasTextBox a:hover:before {
                width: 100%;
            }

    #practiceAreasBottomMenu {
        padding-right: 45px;
        text-align: center;
    }

        #practiceAreasBottomMenu a {
            position: relative;
            left: 45px;
            font-size: 1.15rem;
            color: var(--background);
            text-transform: uppercase;
            white-space: nowrap;
        }

            #practiceAreasBottomMenu a:hover, #practiceAreasBottomMenu a:focus, #practiceAreasBottomMenu a:active {
                color: var(--accentOne);
            }

    #practiceAreasDots {
        position: absolute;
        width: 500px;
        text-align: center;
        display: table;
        bottom: 5rem;
        right: -3rem;
    }

    .topLineRight {
        position: relative;
        right: 0;
        top: -1.05rem;
        background: var(--accentOne);
        width: 2px;
        height: 2px;
        transition: all 2s ease-in-out;
        display: inline-block;
    }

        .topLineRight.active {
            width: 100px;
        }

    .lineRight {
        position: absolute;
        right: 0;
        top: -1.5rem;
        background: var(--accentOne);
        width: 2px;
        height: 2px;
        transition: all 2s ease-in-out;
        display: inline-block;
    }

        .lineRight.active {
            height: 375px;
        }

    .lineLeft {
        position: absolute;
        left: 0;
        bottom: -2.35rem;
        background: var(--accentOne);
        width: 2px;
        height: 2px;
        transition: all 2s ease-in-out;
        display: inline-block;
    }

        .lineLeft.active {
            height: 375px;
        }

    .bottomLineLeft {
        position: relative;
        left: 0;
        bottom: -1.27rem;
        background: var(--accentOne);
        width: 2px;
        height: 2px;
        transition: all 2s ease-in-out;
        display: inline-block;
    }

        .bottomLineLeft.active {
            width: 100px;
            width: 30px;
        }

    .dotCount, .swiper-pagination-bullet {
        width: 20px !important;
        height: 20px !important;
        border: 1px solid var(--secondary) !important;
        display: inline-block !important;
        margin: 0 4px !important;
        background: #FFF !important;
        border-radius: 0 !important;
    }

    .dotCountActive, .swiper-pagination-bullet-active {
        background: var(--background) !important;
    }

    @media(max-width:1231px) {
        #practiceAreasTextBox, .practiceAreasTextBox {
            top: 2rem;
        }

        #practiceAreasRight {
            height: 600px;
        }

            #practiceAreasRight .h2White {
                top: -4rem;
                position: relative;
            }

        .swiper {
            top: -5rem !important;
        }

        .lineLeft {
            bottom: -2.35rem;
        }
    }

    @media (max-width:1023px) {
        #praticeAreasInner {
            padding: 4rem 1rem;
        }

        .lineRight {
            top: -39rem;
        }

        #practiceAreasTextBox, .practiceAreasTextBox {
            position: relative;
            width: 100%;
            right: 0;
            top: 3rem;
            padding: 2rem;
        }

        #practiceAreasPhoto img {
            width: 425px;
            position: absolute;
            right: 2rem;
            top: -590px;
        }

        .swiper {
            position: relative !important;
            top: -4.9rem !important;
        }

        .swiper-pagination {
            left: -165px !important;
            bottom: 3.75rem !important;
        }
    }

    @media (max-width:783px) {
        #practiceAreasPhoto {
            padding-right: 2rem;
            position: absolute;
            height: 615px;
            overflow: hidden;
        }

            #practiceAreasPhoto img {
                position: absolute;
                right: 0;
                top: 0;
                margin: 0 auto;
            }

        .topLineRight {
            top: .5rem;
        }

        .lineRight {
            top: 0;
        }

        .swiper-pagination {
            left: 0 !important;
            bottom: 1.75rem !important;
        }

        #practiceAreasTextBox, .practiceAreasTextBox {
            height: 400px;
        }
    }

    @media (max-width:639px) {
        #praticeAreasInner {
            padding: 4rem 0;
        }

        #practiceAreasTopLineOuter {
            top: .5rem;
        }

        #practiceAreasRight {
            height: 550px;
            padding-left: 2rem;
        }

        #practiceAreasPhoto {
            height: 500px;
            top: 2rem;
        }

        #practiceAreasBottomMenu {
            padding-right: 0;
            text-align: center;
            padding-top: 3rem;
        }

            #practiceAreasBottomMenu a {
                display: block;
                left: 0;
                line-height: 1;
                top: .5rem;
            }

        .swiper {
            left: 50px !important;
            transform: translateX(-72px);
            width: 345px !important;
        }

        #practiceAreasTextBox, .practiceAreasTextBox {
            height: 525px;
            top: 3rem;
        }

            .practiceAreasTextBox .fontBody {
                text-align: justify;
                hyphens: auto;
                -webkit-hyphens: auto;
                word-spacing: -0.05em;
            }

        .swiper-pagination {
            bottom: -3rem !important;
            right: 0 !important;
            left: 0 !important;
        }

        .swiper-slide-next, .swiper-slide-prev {
            visibility: hidden !important;
        }
    }

    @media (max-width:520px) {
        #practiceAreasRight .h2White {
            top: -5rem;
            position: relative;
        }

        #practiceAreasTextBox, .practiceAreasTextBox {
            height: 475px;
            top: 1rem;
        }
    }

    @media (max-width:431px) {
        #practiceAreasRight {
            padding-left: 1.35rem;
        }
    }
    /*#endregion*/

    /*#region content area*/
    #sectionContent {
        background: var(--primary);
        color: var(--background);
        overflow: hidden;
        border-top: 1px solid rgba(0,0,0,0.2);
    }

        #sectionContent a {
            color: var(--background);
        }

            #sectionContent a:hover .h2White {
                /*color: var(--accentOne);*/
            }

    #contentInner {
        padding: 4rem 1rem;
    }

    #contentImage {
        padding: 0 4rem;
        position: relative;
    }

    #contentBottomRow {
        padding-right: 12rem;
    }

    #contentAreaContainer {
        width: 100%;
        max-width: 475px;
        font-size: 1.1875rem;
        font-weight: normal;
        line-height: 1.75;
        letter-spacing: 1px;
    }

    #contentImageContainer {
        position: relative;
    }

    #contentImageButton {
        position: absolute;
        background: rgba(255,255,255,0);
        width: 100%;
        height: 100%;
        transition: all .25s ease-in-out;
    }

        #contentImageButton .cs-button-solid {
            font-size: 0.8375rem;
            font-size: clamp(0.8375rem, 0.805rem + 0.16249999999999998vw, 1rem);
            font-family: var(--primaryFont);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            color: var(--background);
            text-decoration: none;
            font-weight: 600;
            text-align: center;
            margin: 0;
            min-width: 12.5rem;
            padding: 0 1.5rem;
            background-color: rgba(var(--accentOneRGB),.9);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
            transition: color 0.3s;
        }

            #contentImageButton .cs-button-solid:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: rgba(var(--secondaryRGB),.9);
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s;
            }

            #contentImageButton .cs-button-solid:hover:before {
                width: 100%;
            }

    .contentLineLeft {
        position: absolute;
        left: 2rem;
        bottom: -2.35rem;
        background: var(--accentOne);
        width: 2px;
        height: 2px;
        transition: all 2s ease-in-out;
        display: inline-block;
    }

        .contentLineLeft.active {
            height: 375px;
        }

    .contentBottomLineLeft {
        position: relative;
        left: 2rem;
        bottom: -1.3rem;
        background: var(--accentOne);
        width: 2px;
        height: 2px;
        transition: all 2s ease-in-out;
        display: inline-block;
    }

        .contentBottomLineLeft.active {
            width: 100px;
        }
    /*#endregion*/

    /*#region new content two*/
    /* Mobile - 360px */
    @media only screen and (min-width: 0rem) {
        #services-1684 {
            padding: var(--sectionPadding);
            /*border-top: 1px solid rgba(0,0,0,0.2);*/
            overflow: hidden;
            background-color: var(--background);
            background: url('/img/default-home-footer-image.jpg');
            background-position: bottom center;
            background-size: cover;
            position: relative;
            z-index: 1;
        }

            #services-1684 .cs-container {
                width: 100%;
                /* changes to 1280px at desktop */
                max-width: 36.5rem;
                margin: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                /* 48px - 64px */
                gap: clamp(3rem, 6vw, 4rem);
                /*erin*/
                padding: 4rem;
                padding: clamp(1rem, 0.4rem + 3vw, 4rem);
                background: rgba(var(--backgroundRGB), .95);
                background: rgba(9,38,51,.65);
                gap: 2rem;
            }

            #services-1684 .cs-content {
                font-family: var(--bodyFont);
                color: var(--background);
                text-align: left;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                text-align: justify;
            }

            #services-1684 .cs-title {
                font-family: var(--headerFont);
                font-size: 1.6rem;
                font-size: clamp(1.6rem, 0.6rem + 4.5vw, 6rem);
                color: var(--background);
                text-transform: uppercase;
                line-height: 1;
                font-weight: 400;
                line-height: 1;
                letter-spacing: 5px;
            }

            #services-1684 .cs-text {
                max-width: none;
            }

            #services-1684 .cs-topper {
                font-size: 1.15rem;
                font-size: clamp(1.15rem, 0.9799999999999999rem + 0.8500000000000001vw, 2rem);
                font-family: var(--subHeaderFont);
                line-height: 1.5em;
                letter-spacing: 1px;
                color: var(--background);
                margin-bottom: 2rem;
            }

            #services-1684 .h2White {
                font-family: var(--headerFont);
                font-size: 1.3rem;
                font-size: clamp(1.3rem, 1.09rem + 1.05vw, 2.35rem);
                color: var(--background);
                text-transform: uppercase;
                letter-spacing: 10px;
                line-height: 1.15;
                text-align: center;
            }

            #services-1684 .cs-card-group {
                width: 100%;
                margin: 0 auto;
                padding: 0;
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                grid-auto-flow: row;
                gap: 1.75rem;
            }

            #services-1684 .cs-item {
                font-family: var(--bodyFont);
                list-style: none;
                width: 100%;
                margin: 0 auto;
                /* prevents padding and border from affecting height and width */
                box-sizing: border-box;
                padding-bottom: 1.75rem;
                border-bottom: 1px solid var(--accentOne);
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                grid-column: span 12;
                grid-row: span 1;
                position: relative;
                z-index: 1;
            }

                #services-1684 .cs-item:last-of-type {
                    padding-bottom: 0;
                    border-bottom: none;
                }

            #services-1684 .cs-h3 {
                font-family: var(--headerFont);
                font-size: 1.25rem;
                font-size: clamp(1.25rem, 1rem + 1.25vw, 2.45rem);
                color: var(--background);
                color: #FFF;
                line-height: 1.2em;
                text-align: inherit;
                margin: 0 0 .25rem;
                text-transform: uppercase;
            }

        .cs-item-am-line {
            border-top: 1px solid var(--accentOne);
            padding-top: 2rem;
            margin-top: 1rem !important;
        }

        #services-1684 .cs-item-text {
            font-size: 1.15rem;
            font-size: clamp(1.15rem, 1.13rem + 0.10000000000000009vw, 1.25rem);
            font-weight: 300;
            line-height: 1.5em;
            margin: 0 0 1.5rem 0;
            padding: 0;
            color: var(--background);
        }

        #services-1684 .cs-button-solid {
            font-size: 1rem;
            font-family: var(--bodyFont);
            letter-spacing: 1px;
            line-height: 3rem;
            text-decoration: none;
            text-align: center;
            margin: 1rem 0 0 0;
            color: var(--background);
            min-width: 9.375rem;
            padding: 0 1rem;
            background-color: var(--primary);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
        }

            #services-1684 .cs-button-solid:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: var(--secondary);
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s;
            }

            #services-1684 .cs-button-solid:hover:before {
                width: 100%;
            }
    }
    /* Tablet - 768px */
    @media only screen and (min-width: 48rem) {
        #services-1684 .cs-container {
            max-width: 75rem;
        }

        #services-1684 .cs-card-group {
            /* 20px - 32px */
            gap: clamp(1.25rem, 3vw, 2rem);
        }

        #services-1684 .cs-item {
            padding: 0;
            /* 20px - 32px */
            padding-left: clamp(1.25rem, 3vw, 2rem);
            border: none;
            border-left: 1px solid var(--accentOne);
            grid-column: span 4;
        }

        .cs-item-am-line {
            border-top: none;
            padding-top: 0 !important;
            margin-top: 0;
        }
    }

    /*#endregion*/