@font-face {
    font-family: 'Host Grotesk';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(/fonts/hostgrotesk/hostgrotesk-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --dr_white: #ffffff;
    --dr_black: #000000ff;
    --dr_yellow: #E3C800;
    --dr_blue: #1BA1E2;
    --dr_red: #E51400;
    --dr_offblack: #1d1d1d;
    --dr_semitransparent_offblack: #1d1d1de6;
    --dr_semitransparent_offwhite: #fffffff1;
    --dr_gear_spin_speed: 10s;
    --dr_slide_left_factor: translateX(-60%);
    --dr_slide_right_factor: translateX(60%);
    --dr_slide_up_factor: translateX(-60%);
    --dr_slide_down_factor: translateX(60%);
    --dr_slide_animation_duration: 1s;
    box-sizing: border-box;
}

html {
    font-size: xx-large;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--dr_white);
}

body {
    margin: 0;
    background-color: var(--dr_black);
    font-family: 'Host Grotesk';
    font-weight: 300;
}

h1, h2 {
    margin-top: 0;
    /*margin-bottom:0;*/
}

h2 {
    font-size: 36px;
}

header {
    text-align: left;
    background-color: var(--dr_semitransparent_offblack);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

    header img {
        height: 2em;
        padding-top: .2em;
        padding-left: .2em;
    }

footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: space-around;
    background-color: var(--dr_semitransparent_offblack);
    color: var(--white);
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 3em;
    z-index: 34;
    font-size: 18px;
}

#idThreeMainContainer {
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    position: sticky;
    flex-direction: column;
    min-height: 5vh;
    padding-left: .25em;
    padding-right: .25em;
}

.ThreeMainItem {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-basis: 0;
    justify-content: center;
    border-radius: 10px;
    border: 4px groove;
    margin-bottom: 1em;
    background-color: var(--dr_semitransparent_offwhite);
    padding-top: 1em;
    padding-bottom: 1em;
    font-size: 24px;
    text-align: center;
    color: var(--dr_black);
}

    .ThreeMainItem p {
        line-height: 0.4em;
        font-size: 18px;
    }

    .ThreeMainItem:first-child {
        border-color: var(--dr_red);
    }

    .ThreeMainItem:nth-child(2) {
        border-color: var(--dr_yellow);
    }

    .ThreeMainItem:nth-child(3) {
        border-color: var(--dr_blue);
    }


.ThreeMainItemHeader {
    text-align: center;
}

    .ThreeMainItemHeader strong {
        font-weight: bold;
        font-size: 36px;
        line-height: 0;
    }


.MedSection {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    margin-left: .25em;
    margin-right: .25em;
    margin-bottom: 3em;
    color: var(--dr_white);
    overflow-x: hidden;
}

.SectionContent {
    display: flex;
    align-content: flex-start;
    flex-direction: column;
    flex: 1;
    padding: 1em;
    font-size: 18px;
    border: 4px groove;
    border-radius: 10px;
    margin-bottom: 2em;
}

    .SectionContent p {
        margin-block-end: 0;
    }

.HeadShotImg {
    width: 20vw;
    margin-right: 1em;
    float: left;
    border-radius: 10px;
}

.ThreeSquaresImg {
    height: 2.5em;
    margin-right: 1em;
    float: left;
}

#idDRPhonetic > img {
    height: 3em;
}

.SectionIntroHeading {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 5em;
    padding-bottom: 0em;
    margin-top: 0;
    margin-bottom: 0;
}


 
#AboutUs .SectionContent {
    border-color: var(--dr_black);
    background: var(--dr_offblack)
}

#AboutUs a {
    text-decoration: none;
    color: var(--dr_blue);
}

#AboutUs p {
    margin-top: 0;
}


#idDRPhonetic {
    border-color: var(--dr_yellow);
    margin-top: 6em;
}

    #idDRPhonetic > img {
        align-self: flex-start;
    }

.ColumnsOfText {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 18px;
    padding: 2em;
    padding-bottom: 4em;
    overflow: hidden;
    background-color: var(--dr_white);
    color: var(--dr_offblack);
}

.TextColumn {
    flex: 1;
    align-self:center
}

    .TextColumn p {
        margin-block-start: 0;
        /*margin-block-end: 0;*/
    }

    .TextColumn > h2{
        color: var(--dr_offblack)
        
    }

    .TextColumn  .ThreeGears   {
        filter: drop-shadow(1px 1px 0px var(--dr_offblack));
      
    }

 

.BulbGear {
    width: 3em;
    text-align: center;
    margin-bottom: 1em;
    margin-left: 1em;
}




#idBigIt {
    position: sticky;
    top: 0;
    z-index: -2;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12.5vh;
    margin-top: 12.5vh;
}

    #idBigIt img {
        width: 50vw;
    }

@keyframes spinRight {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spinLeft {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


.RedGear {
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: var(--dr_gear_spin_speed);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: spinLeft;
    fill: var(--dr_red);
}

.YellowGear {
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: var(--dr_gear_spin_speed);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: spinRight;
    fill: var(--dr_yellow);
}

.BlueGear {
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: var(--dr_gear_spin_speed);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: spinLeft;
    fill: var(--dr_blue);
}

.ThreeGearsContainer {
    flex-direction: column;
    display: flex;
    justify-content: space-around;
    height: 50vh;
    text-align: center;
}

.ThreeGears {
    padding-right: 1.5em;
    justify-content: center;
    text-align: center;
}

    .ThreeGears > svg {
        width: 6em;
    }

em {
    color: var(--dr_blue);
    font-weight: bold;
}



#idPhilosophy {
    background: var(--dr_white);
}



/********************************************************************************
    Media Query Adjustments 
*********************************************************************************/


@media (min-width: 768px) {

    #idThreeMainContainer {
        padding-left: 2em;
        padding-right: 2em;
        
    }
        
        .ThreeMainItem .BulbGear {
            width: 4.5em;
            margin-bottom: 1em;
        }

    .ColumnsOfText {
        flex-direction: row;
        justify-content:start;
        align-content: end;
        font-size: 20px;
        padding: 2em;
    }

    .TextColumn {
        flex: 1;
        padding-left: 2em;
        padding-right: 2em;
    }


    .MedSection {
        flex-direction:column;
        justify-items:stretch;
        font-size: 18px;
        margin-top: 0em;
        margin-bottom: 6em;
    }

    .SectionContent {
        font-size: 20px;
        line-height: 1.25;
        /*max-width: 70vw;*/
        padding: 2em;
        margin-right: 2em;
        margin-left: 2em;
    }
    .HeadShotImg {
        width: 10vw;
    }



   
}

@media (min-width: 1024px) {
    #idThreeMainContainer {
        flex-direction: row;
        height: 80vh;
        align-items: baseline;
        padding-left: 2em;
        padding-right: 2em;
    }

    .ThreeMainItem {
        margin-left: .25em;
        margin-right: .25em;
        font-size: 18px;
       max-height: 50vh;
        align-self: stretch;
        justify-content: center;
    }

        .ThreeMainItem p {
            font-size: 20px;
        }

        .ThreeMainItem img {
            padding-right: .25em;
        }

        .ThreeMainItem .BulbGear {
            width: 5em;
            margin-bottom: 1em;
        }

        .ThreeMainItem .ThreeMainItemHeader {
            font-size: 36px;
            line-height: 1;
        }


    .MedSection {
        flex-direction: row;
        justify-content:space-around;
        font-size: 18px;
        margin-left: 2em;
        margin-right: 2em;
        margin-top: 0em;
        
    }

    .SectionContent {
        font-size: 20px;
        line-height: 1.25;
        max-width: 70vw;
        padding: 2em;
        margin-right: .5em;
        margin-left: .5em;
    }



    .HeadShotImg {
        width: 10vw;
    }

    #idDRPhonetic > img {
        height: 4em;
    }

    h2 {
        font-size: 48px;
    }
    .ThreeSquaresImg {
        height: 3.5em;
     
    }
}

/********************************************************************************
    End Media Query Adjustments 
*********************************************************************************/



/********************************************************************************************************************************
     Animation Styles
********************************************************************************************************************************/

/* Classes used to have items slide into view as page is scrolled */

.AniScrollSlideUp {
    visibility: hidden;
}

.AniScrollSlideInLeft {
    visibility: hidden;
}

.AniScrollSlideInRight {
    visibility: hidden;
}

/* Animation that slides in from right and fades in*/

.slide-in-from-right {
    animation-name: slide-in-from-right;
    -webkit-animation-name: slide-in-from-right;
    animation-duration: var(--dr_slide_animation_duration);
    -webkit-animation-duration: var(--dr_slide_animation_duration);
    visibility: visible;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
}

@keyframes slide-in-from-right {
    0% {
        opacity: 0;
        -webkit-transform: var(--dr_slide_right_factor)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

@-webkit-keyframes slide-in-from-right {
    0% {
        opacity: 0;
        -webkit-transform: var(--dr_slide_right_factor)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}



/* Animation that slides in from left and fades in*/
.slide-in-from-left {
    animation-name: slide-in-from-left;
    -webkit-animation-name: slide-in-from-left;
    animation-duration: var(--dr_slide_animation_duration);
    -webkit-animation-duration: var(--dr_slide_animation_duration);
    visibility: visible;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
}

@keyframes slide-in-from-left {
    0% {
        opacity: 0;
        -webkit-transform: var(--dr_slide_left_factor)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

@-webkit-keyframes slide-in-from-left {
    0% {
        opacity: 0;
        -webkit-transform: var(--dr_slide_left_factor)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}


/* Animation that slides down and fades in*/
.slide-down {
    animation-name: slide-down;
    -webkit-animation-name: slide-down;
    animation-duration: var(--dr_slide_animation_duration);
    -webkit-animation-duration: var(--dr_slide_animation_duration);
    visibility: visible;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
}

@keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: var(--dr_slide_down_factor);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

@-webkit-keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: var(--dr_slide_down_factor);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}



/* Animation that slides up and fades in */
.slide-up {
    animation-name: slide-up;
    -webkit-animation-name: slide-up;
    animation-duration: var(--dr_slide_animation_duration);
    -webkit-animation-duration: var(--dr_slide_animation_duration);
    visibility: visible;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
}

@keyframes slide-up {
    0% {
        opacity: 0;
        -webkit-transform: var(--dr_slide_up_factor);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

@-webkit-keyframes slide-up {
    0% {
        opacity: 0;
        -webkit-transform: var(--dr_slide_up_factor);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

/********************************************************************************************************************************
     End Animation Styles
********************************************************************************************************************************/