@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url("https://use.typekit.net/opn3moa.css");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

    h1 { @apply text-6xl my-12 font-display; }

    h2 { @apply text-4xl my-12 font-display; }

    p { @apply leading-10 text-lg mb-8; }

}

.redbo { background-color: darkorchid; }


.clip-curve { clip-path: url(#svgPath); }

.clip-backPath { clip-path: url(#svgPathBack); }

.clip-cta-curve { clip-path: url(#svgCtaPath); }

.clip-services-curve { clip-path: url(#svgServicesPath); }


.home-height { height: 528px; }

.home-cta-height { height: 822px }

.home-services-height { height: 1200px }


.craniosacral-therapy-bg { background-image: url('/images/headers/craniosacral-therapy-teen-side@lg.jpg')}

/*.craniosacral-therapy-bg { background-image: url('/images/headers/craniosacral-therapy@lg.jpg')}*/

.sensory-integration-therapy-bg { background-image: url('/images/headers/sensory-integration-therapy@lg.jpg')}

.concussion-therapy-bg { background-image: url('/images/headers/concussion-treatment-dynavision@lg.jpg')}

/*.concussion-therapy-bg { background-image: url('/images/headers/concussion-therapy@lg.jpg')}*/

.scoliosis-treatment-bg { background-image: url('/images/headers/scoliosis-treatment-measurement@lg.jpg')}

.developmental-therapy-bg { background-image: url('/images/headers/developmental-therapy@lg.jpg')}

.feeding-therapy-bg { background-image: url('/images/headers/feeding-therapy@lg.jpg')}

.lactation-counselor-bg { background-image: url('/images/headers/lactation-counselor@lg.jpg')}

.infant-massage-bg { background-image: url('/images/headers/infant-massage@lg.jpg')}

.occupational-therapy-bg { background-image: url('/images/headers/occupational-therapy@lg.jpg')}

.physical-therapy-bg { background-image: url('/images/headers/physical-therapy@lg.jpg')}

.speech-therapy-bg { background-image: url('/images/headers/speech-therapy@lg.jpg')}

.sally-fryer-dietz-bg { background-image: url('/images/headers/sally-fryer-dietz@lg.jpg')}

.sally-dietz-and-kids-bg { background-image: url('/images/headers/sally-dietz-and-kids@lg.jpg')}

.IPT-staff-bg { background-image: url('/images/headers/IPT-staff@lg.jpg')}

.IPTKids-Gym-bg { background-image: url('/images/headers/IPTKids-Gym@lg.jpg')}

.sensory-integration-therapy-color { border-left-color: hsl(190, 100%, 28%); }
.sensory-integration-therapy-hover { border-left-color: hsl(32, 93%, 54%); }

.sensory-integration-therapy-color { border-left-color: hsl(190, 100%, 28%); }
.developmental-therapy-color { border-left-color: hsl(176, 100%, 33%); }
.occupational-therapy-color { border-left-color: hsl(190, 100%, 28%); }
.physical-therapy-color { border-left-color: hsl(190, 100%, 28%); }
.speech-therapy-color { border-left-color: hsl(190, 100%, 28%); }
.craniosacral-therapy-color { border-left-color: hsl(176, 100%, 33%); }
.concussion-therapy-color { border-left-color: hsl(32, 93%, 54%); }
.scoliosis-treatment-color { border-left-color: hsl(86, 54%, 51%); }
.feeding-therapy-color { border-left-color: hsl(334, 59%, 70%); }
.lactation-counselor-color { border-left-color: hsl(190, 100%, 28%); }
.infant-massage-color { border-left-color: hsl(298, 30%, 57%); }


@screen lg {
    .redbo { background-color: blue; }


    .clip-curve { clip-path: url(#svgPathLg); }

    .clip-backPath { clip-path: url(#svgPathBackLg); }

    .clip-cta-curve { clip-path: url(#svgCtaPathLg); }

    .clip-services-curve { clip-path: url(#svgServicesPathLg); }



    .home-height { height: 625px; }

    .home-cta-height { height: 768px }

    .home-services-height { height: 1248px }


    .craniosacral-therapy-bg { background-image: url('/images/headers/craniosacral-therapy-teen-side@2xl.jpg')}

    /*.craniosacral-therapy-bg { background-image: url('/images/headers/craniosacral-therapy@2xl.jpg')}*/

    .sensory-integration-therapy-bg { background-image: url('/images/headers/sensory-integration-therapy@2xl.jpg')}

    .concussion-therapy-bg { background-image: url('/images/headers/concussion-treatment-dynavision@2xl.jpg')}

    /*.concussion-therapy-bg { background-image: url('/images/headers/concussion-therapy@2xl.jpg')}*/

    .scoliosis-treatment-bg { background-image: url('/images/headers/scoliosis-treatment-measurement@2xl.jpg')}

    .developmental-therapy-bg { background-image: url('/images/headers/developmental-therapy@2xl.jpg')}

    .feeding-therapy-bg { background-image: url('/images/headers/feeding-therapy@2xl.jpg')}

    .lactation-counselor-bg { background-image: url('/images/headers/lactation-counselor@2xl.jpg')}

    .infant-massage-bg { background-image: url('/images/headers/infant-massage@2xl.jpg')}

    .occupational-therapy-bg { background-image: url('/images/headers/occupational-therapy@2xl.jpg')}

    .physical-therapy-bg { background-image: url('/images/headers/physical-therapy@2xl.jpg')}

    .speech-therapy-bg { background-image: url('/images/headers/speech-therapy@2xl.jpg')}

    .sally-fryer-dietz-bg { background-image: url('/images/headers/sally-fryer-dietz@2xl.jpg')}

    .sally-dietz-and-kids-bg { background-image: url('/images/headers/sally-dietz-and-kids@2xl.jpg')}

    .IPT-staff-bg { background-image: url('/images/headers/IPT-staff@2xl.jpg')}

    .IPTKids-Gym-bg { background-image: url('/images/headers/IPTKids-Gym@2xl.jpg')}

}

@screen 2xl {
    .redbo { background-color: limegreen; }


    .clip-curve { clip-path: url(#svgPath2xl); }

    .clip-backPath { clip-path: url(#svgPathBack2Xl); }

    .clip-cta-curve { clip-path: url(#svgCtaPath2xl); }

    .clip-services-curve { clip-path: url(#svgServicesPath2xl); }


    .home-height { height: 880px; }

    .home-cta-height { height: 1059px }

    .home-services-height { height: 1475px }



    .craniosacral-therapy-bg { background-image: url('/images/headers/craniosacral-therapy-teen-side@2xl.jpg')}
    /*.craniosacral-therapy-bg { background-image: url('/images/headers/craniosacral-therapy@2xl.jpg')}*/

    .sensory-integration-therapy-bg { background-image: url('/images/headers/sensory-integration-therapy@2xl.jpg')}

    .concussion-therapy-bg { background-image: url('/images/headers/concussion-treatment-dynavision@2xl.jpg')}

    /*.concussion-therapy-bg { background-image: url('/images/headers/concussion-therapy@2xl.jpg')}*/

    .scoliosis-treatment-bg { background-image: url('/images/headers/scoliosis-treatment-measurement@2xl.jpg')}

    .developmental-therapy-bg { background-image: url('/images/headers/developmental-therapy@2xl.jpg')}

    .feeding-therapy-bg { background-image: url('/images/headers/feeding-therapy@2xl.jpg')}

    .lactation-counselor-bg { background-image: url('/images/headers/lactation-counselor@2xl.jpg')}

    .infant-massage-bg { background-image: url('/images/headers/infant-massage@2xl.jpg')}

    .occupational-therapy-bg { background-image: url('/images/headers/occupational-therapy@2xl.jpg')}

    .physical-therapy-bg { background-image: url('/images/headers/physical-therapy@2xl.jpg')}

    .speech-therapy-bg { background-image: url('/images/headers/speech-therapy@2xl.jpg')}

    .sally-fryer-dietz-bg { background-image: url('/images/headers/sally-fryer-dietz@2xl.jpg')}

    .sally-dietz-and-kids-bg { background-image: url('/images/headers/sally-dietz-and-kids@2xl.jpg')}

    .IPT-staff-bg { background-image: url('/images/headers/IPT-staff@2xl.jpg')}

    .IPTKids-Gym-bg { background-image: url('/images/headers/IPTKids-Gym@2xl.jpg')}


}


/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-enter-active {
    transition: all 1s;
}
.slide-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-enter, .slide-leave-to
    /* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}



/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}


.list-complete-item {
    transition: all 1s;
    /*display: inline-block;*/
}
.list-complete-enter, .list-complete-leave-to
    /* .list-complete-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
}
.list-complete-leave-active {
    position: absolute;
}