*{box-sizing: border-box;}
html{width:100%; height:100%; padding:0px; margin:0px;}
body{width:100%; min-height: 100%; overflow-x: hidden; padding:0px; margin:0px; font-family: 'Lato', sans-serif; font-size: 18px; line-height: 1.4em; background-color:#FFF; color:#333; font-weight: 400;}
body.home{position: relative;}
a{color:#319096;}
a.read-more,
a.learn-more{display: inline-block; margin:0px auto; padding:8px 16px; border:1px solid #666; color:#666; text-decoration: none; border-radius: 0px;   cursor:pointer; box-shadow: rgba(0,0,0,0.25) 0px 2px 4px 0px; transition:all 0.218s ease; position: absolute; bottom:15px; left:50%; margin-left:-57px;}


.button{display: inline-block; padding:8px 22px; font-weight: 500; color:#fff; background-color:#319096; border:1px solid rgba(0,0,0,0); cursor:pointer; box-shadow: rgba(0,0,0,0.15) 0px -3px 0px 0px inset; outline-color: #fff; outline-style: none; transition: all 0.2s ease-out; text-decoration: none; margin-top:8px;}
.button:hover{box-shadow: rgba(0,0,0,0.0) 0px -3px 0px 0px inset;}

a.read-more:hover,
a.learn-more:hover{background-color:#fff; box-shadow: rgba(66,133,244,.3) 0px 0px 3px 3px;}

.content-wrap{width:100%; max-width: 1280px; margin:0px auto; position: relative; display: block;}
.content-wrap:after{content:''; display: block; clear: both;}
.astrisk{font-size: 0.8em; font-style: italic; line-height: 1.2em;}
.center{text-align: center; margin-left:auto; margin-right: auto;}
.left{width:50%; float:left; padding-right:48px; border-right: 1px solid #999;}
.right{width:50%; float:right; padding-left: 48px;}

h1{font-size: 1.7em; margin:32px 0px 32px 0px; line-height: 1.2em;}
h4{font-size: 1.2em; font-weight: normal; line-height: 1.4em;}
p.emp{font-size: 1em; font-style: italic;}
img.aside{float:left; width:225px; height: auto; margin:0px 48px 16px 0px; border:1px solid #999; padding:4px;}

footer{background-color: #fff;  width:100%; margin-top:48px;}
footer .content-wrap{border-top:1px solid #999;}
footer a{color:#333; text-decoration: none;}
footer .footer-center{background-image: url(../images/logo2025.webp); background-size: contain; background-position: center; width:145px; height: 145px; margin:0px auto 145px auto;}
footer .footer-left{position: absolute; left: 0px; top:16px; width:200px; text-align: left; font-size: 0.8em; line-height: 1.2em;}
footer .footer-right{position: absolute; right: 0px; top:16px; width:200px; text-align: right; font-size: 0.8em; line-height: 1.2em;}

.home header{background-image: url(../images/header-home-2.webp); background-size: cover; background-repeat: no-repeat; background-position: right top; height: 550px; margin-bottom: 48px; padding:74px 0px 0px; display: flex; justify-content: center; flex-direction: column;}
.home header h1{text-align: center; font-weight: 400; margin:0px; font-size: 36px;}
.home header .title-wrap{width:100%; padding:24px 0px;}
.home header h1 span{display: block; font-size: 0.9em;}
.home h2{font-weight: 400;}
.nav-wrap{background-color:rgba(255,255,255,0.7); position: fixed; top:0px; width:100%;}
.title-wrap{background-color:rgba(255,255,255,0.8);}
nav{padding: 16px 0px;}
nav ul{margin:0px; padding:0px;}
nav li{list-style: none; display: inline-block; margin-right: 16px; position: relative;}
nav .no-link,
nav a{color:#333; text-decoration: none; display: inline-block; padding:8px 16px 8px 0px; cursor: pointer;}


nav .submenu {position: absolute; top:100%; left:-20px; height:0px; padding:0px 0px; background-color:#fff; box-shadow: rgba(0,0,0,0.0) 0px 0px 0px; z-index: 999; overflow: hidden; transition: all 0.3s; margin-top:15px;}
nav .submenu:before{content:''; display: block; width:100%; height: 10px; position: absolute; top:-6px; left:0px; background-color: #ccc; z-index: 999;}
nav .submenu.on{height: 220px; padding:24px 0px;box-shadow: rgba(0,0,0,0.3) 0px 3px 6px 0px; }
nav .submenu ul{display: block; width:275px; margin:0px; padding:0px; float:left;}
nav .submenu li{display:block; text-align: left; margin:0px; padding:0px 16px;}
nav .submenu li:hover{background-color:#ccc;}
nav .submenu a{color:#000; font-style: normal; display: block;}

.home .submenu{background-color:rgba(255,255,255,0.8);}
.home .submenu:before{background-color: #fff;}

.home .intro{margin:32px 24px 48px 24px; font-size: 22px; line-height: 1.2em;}
.home .sub-section{ display: flex; justify-content: space-around; align-items: center;}
.home .sub-section section{border:5px solid #999; width:34%; padding:216px 12px 64px 12px; background-size: auto 200px; background-repeat: no-repeat; background-position: center top; font-size: 16px; line-height: 1.2em; position: relative;}
.home .sub-section .spacer{ }
.home .sub-section h3{ text-align: center; font-size: 18px;}

.home .sub-section section.child-therapy{background-image: url(../images/child-therapy-th.jpg);}
.home .sub-section section.adolescent-therapy{background-image: url(../images/adolescents-th.jpg);}
.home .sub-section section.adult-therapy{background-image: url(../images/adult-therapy-th.webp);}
.home .sub-section section.family-therapy{background-image: url(../images/family-therapy-th.webp);}

.interior nav{padding-top:15px;}
.interior .hero{height: 175px; background-size: cover; background-position: center; margin-bottom: 48px;}
.interior .title{ text-align: right; margin-top: -57px; margin-bottom: 14px;  font-size: 18px; line-height: 1em;}
.interior .title span{display: block; font-size: 0.8em;}
.interior .title:before{content:''; display: block; float:right; width:80px; height: 70px; background-image: url(../images/logo2025.webp); background-size: contain; background-repeat: no-repeat; margin-left: 8px; margin-top:-18px;}
.interior .hero{background-image: url(../images/butterflies.webp);}
/*.contact .hero{background-image: url(../images/contact-header.jpg); height: 450px; background-position: center;}*/
.contact .map{margin-top:32px;}
.interior h2{margin-bottom: 48px;}
.interior h1{font-weight: 400;}
h1.service-title{text-align: center; font-weight: 400; position: relative;}
h1.service-title:before{content:''; height: 2px; border-top: 1px solid #999; border-bottom: 1px solid #999; position: absolute; top:0.5em; width:100%; left:0px; display: block; z-index: -2;}
h1.service-title:after{content:''; display: inline-block; height: 1.2em; width:250px; background-color: #fff; position: absolute; top:0px; left:50%; margin-left:-125px; z-index: -1;}

label{ display: inline-block; background-color:#FFF; margin-top:-22px; padding:4px 8px;}
input[type="text"],
input[type="number"],
input[type="phone"]{display: block; width:100%; font-size:18px; padding:8px 12px; border:1px solid #999; border-radius: 3px; margin:4px 0px 12px 0px; }
input.invalid{border-color:#ff0000;}
input[type="checkbox"]{ }
label.checkbox{display: block; margin-left: 24px;}
textarea{display: block; width:100%; height:250px; font-size:18px; padding:8px 12px; border:1px solid #999; border-radius: 3px; margin:4px 0px 12px 0px;}
.radio label{display: inline-block; margin-right:12px;}
input[type="radio"]{margin-right:12px;}
fieldset{border:1px solid #666; margin:32px 0px;}

.contact input[type="submit"]{padding:8px 56px 8px 12px; font-size: 18px; background-color:#FFF; border:1px solid #999; border-radius: 3px;  cursor: pointer; transition:all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); position: relative;}
.submit-wrap:hover:after{animation: submit-hover 0.3s linear infinite;}
.submit-wrap{display: inline-block; position: relative;}
.submit-wrap:after{z-index: 1; content:''; display: block; background-image:url(../images/plane.svg); background-size:contain; background-position: center; background-repeat: no-repeat; width:30px; height: 30px; position: absolute; top:3px; right:6px;}
.send .submit-wrap:after{animation: submit-send 1s linear;}
.success .submit-wrap:after{background-image:url(../images/check.svg);}

input.half{width:48%; display: inline-block; vertical-align: top;}

.insurance .spacer{display:table-cell; width:48px;}
.insurance img.aside{width:264px;}
.payment-table{display: table;}
.payment-table ul{list-style:square;}
.insurance-accepted{display: table-cell; padding:16px 24px; border:1px solid #999; border-collapse: collapse; width:325px; background-color: #f9f6ee;}
.payment-accepted{display: table-cell; padding:16px 24px; border:1px solid #999; border-collapse: collapse;  width:325px; background-color:#f9f6ee;}

.play-therapy{width:auto; border:18px solid #ffd804; padding:24px; border-radius:8px; margin:64px auto; background-image: url(../images/play-therapy.jpg);background-size: 500px auto; background-repeat: no-repeat; background-position: right top; padding-right: 334px; padding-bottom: 32px; max-width: 700px;}
.play-therapy h3{margin-top: 0px; text-align: center; }

@keyframes submit-hover {
    0%,100% {right: 6px; top:3px;}    
    
    50% { right:8px; top:3px; }
    
}

@keyframes submit-send{
    0%{right:6px; top:3px; height: 30px; width:30px; }
    20%{right:44px; top:1px; height: 50px; width:50px; }
    50%{right:30px; top:3px; height: 24px; width:24px;}
    70%{right:15px; top:10px; height: 15px; width:15px;}
    100%{right:6px; top:15px; height: 0px; width:0px;}
}

@media screen and (max-width:1376px){
    
    .content-wrap{width:auto; margin-left: 48px; margin-right: 48px;}
    .home .sub-section section{width:24%;}
}

@media screen and (max-width:1224px){
    
    .home .sub-section{display: block; max-width: 800px; margin:48px auto;}
    .home .sub-section section{display: block; float:left; width:48%; margin-right: 4%; margin-bottom: 4%; min-height: 561px; background-size: 375px auto; padding-top:245px;}
    .home .sub-section .spacer{display: none;}
    .home .sub-section section:nth-of-type(2n){margin-right: 0px;}
    .home .sub-section section:nth-of-type(2n+1){clear:left;}
    
    .play-therapy{width:auto; margin:24px auto; max-width: 700px; clear: both;}
    nav li{margin-right: 2px;}
    .interior .title:before{margin-left: 0px;}
    nav .no-link, nav a{font-size: 16px;}
}

@media screen and (max-width:765px){
    .content-wrap{margin-left:24px; margin-right: 24px;}
    .home .sub-section section{float:none; width:auto; margin-right: 0px; background:none !important; padding-top:48px; padding-left:275px; min-height: 0px; position: relative; overflow: hidden;}
    .home .sub-section section:before{content:''; display: block; position: absolute; top:0px; left:0px; width:265px; height: 353px;  background-size: cover; background-position: center top; background-repeat: no-repeat;}
    
    .home .sub-section section.child-therapy:before{background-image: url(../images/child-therapy-th.jpg);}
    .home .sub-section section.adolescent-therapy:before{background-image: url(../images/adolescents-th.jpg);}
    .home .sub-section section.adult-therapy:before{background-image: url(../images/adult-therapy-th.webp);}
    .home .sub-section section.family-therapy:before{background-image: url(../images/family-therapy-th.webp);}
    
    a.read-more, a.learn-more{margin-left:75.5px;}
    
    
    
    .interior .title{font-size: 14px;}
    .interior .title:before{margin-left: 7px;}
    
    img.aside{margin:0px 16px 16px 0px;}
    .interior h2{margin-bottom: 32px;}
    /*.contact .hero{height: 200px;}*/
    .interior .hero{margin-bottom: 24px; height: 85px;}
    .right{width:auto; float:none; padding:0px 0px;}
    .left{width:auto; float:none; padding:0px 0px; border-right: none;}
    .insurance img.aside{width:170px;}
    .payment-table{clear: both;}
    .home header .title-wrap{background:transparent;}
    .home header{background-image: url(../images/header-home-2-sm.webp);}
}

@media screen and (max-width:1024px){
    body{font-size: 16px;}
    .content-wrap{margin-left:16px; margin-right: 16px;}
    .home .intro{font-size: 18px; margin:32px 0px 32px 0px;}
    .home header{height: 240px; padding-top:0px; }
    .nav-wrap{position: absolute; z-index: 2; background:transparent}
    
    nav{padding-top:27px;}
    nav ul{ left:-500px; width:100%; max-width: 500px; background-color: rgba(255,255,255,0.99); margin:0px; padding:64px 0px 0px 0px; position: fixed; top:0px; height: 100%; z-index: 999; transition:all 0.3s ease;}
    body.on nav ul{left:0px;}
    nav li{display: block; margin:0px; padding:0px; }
    nav .no-link, nav a{padding:12px 16px 12px 32px; border-bottom: 1px solid #999; display: block;}
    nav .submenu{position: static; height: auto; margin:0px; box-shadow: none; border:none; background-color: transparent;}
    nav .submenu ul{width:auto; float:none; position: static; height: auto; background-color: transparent;}
    nav .submenu li{padding:0px;}
    nav .submenu li a{padding-left:48px; font-size: 0.9em;}
    nav .submenu:before{display: none;}
    nav .no-link{border-bottom:10px solid #ccc;}
    nav:before{content:'MENU'; border-bottom:1px solid #999; color:#999; width:42px; text-align: center; position: absolute; top:16px; left: 5px; cursor: pointer; font-size: 13px; line-height: 16px;}
    nav:after{content:''; display: block; width:42px; height: 4px; border-top:1px solid #999; border-bottom:1px solid #999; position: absolute; top:37px; left:5px;}
    
    nav > ul:before{content:''; display: block; width:32px; border-top:1px solid #999; transform:rotate(45deg); position: absolute; top:27px; right:16px;}
    nav > ul:after{content:''; display: block; width:32px; border-top:1px solid #999; transform:rotate(-45deg); position: absolute; top:27px; right:16px;}
    
    .interior .title{margin-top:7px; font-size: 16px;}
    .interior .title:before{margin-left: 7px;}
    
    
    .home header h1{ font-size: 30px;}
}

@media screen and (max-width:560px){
    
    .home .sub-section section:before{ width:100%; height: 250px;}
    .home .sub-section section{padding-left:12px; padding-top:264px;}
    a.read-more, a.learn-more{margin-left: -57px;}
    footer .footer-center{margin-bottom: 12px;}
    footer .footer-left{position: static; text-align: center; width: auto;}
    footer .footer-right{position: static; text-align: center; width: auto; margin-bottom: 64px;}
    
    .insurance img.aside{display: none;}
    .payment-table{display: block;}
    .insurance-accepted{display: block; margin:16px 24px; width:auto;}
    .insurance .spacer{display: none;}
    .payment-accepted{display: block; margin:16px 24px;width:auto;}
    
    img.aside{display: none;}
    .about img.aside{display: block; float:none; margin:16px auto 0px;}
    .play-therapy{margin:24px auto; padding:16px 16px 300px 16px; background-position: right bottom;}
}