@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

h1{font-size:2.25rem;margin-bottom: 1em}
h2{font-size:1.88rem}
h3{font-size:1.5rem}
h4, th{font-size:1.25rem}



/* HEADER ------------------------------*/
body>header>.wrap{overflow: visible; max-width: 87.5rem}
#brand{display: inline-block; margin: 1.38rem auto 1rem}
#brand:hover {transform: scale(0.9)}
#brand img {display: block; margin:0 auto}

header .office {top: 2rem; position: absolute}
header .office.pediatrics {left: 1.88rem}
header .office.fax {right: 1.88rem}
body>header .office a,
body>header .office span {display: block}
body>header .fax-number {margin-top: .5rem;}


/* NAV ------------------------------ */
nav ul{margin: 0}
#mainnav{overflow:visible; margin-bottom: -2em;}
#mainnav ul{text-align:center;overflow:visible;margin: 0;padding: 0;}
#mainnav li{display:inline-block;z-index:1;position:relative}
#mainnav>ul>li+li{margin-left: 0.25em}
#mainnav>ul>li>a{font-family: 'Delius', cursive; position: relative; z-index: 2; border: 4px solid #fff; font-size: 1.125rem}
#mainnav>ul>li:hover{z-index: 2}
     #mainnav>ul>li:nth-child(even)>a{line-height: 2.69rem; padding: 0 1.5rem;}
     #mainnav>ul>li:nth-child(odd)>a{line-height: 3.13rem; padding: 0 1.3rem;}
     #mainnav>ul>li:first-child>a{background: #F6871F; transform: rotate(-1deg)}
     #mainnav>ul>li:nth-child(2)>a{background: #4CB748}
     #mainnav>ul>li:nth-child(3)>a{background: #F0493E; transform: rotate(-2deg)}
     #mainnav>ul>li:nth-child(4)>a{background: #40C4E0}
     #mainnav>ul>li:nth-child(5)>a{background: #005DAC; transform: rotate(-2deg)}
     #mainnav>ul>li:nth-child(6)>a{background: #6F33A4; transform: rotate(2deg)}
          #mainnav>ul>li:first-child:hover>a,
          #mainnav>ul>li:first-child.on>a{background:#fff; color:#F6871F; border-color: #F6871F;}
          #mainnav>ul>li:nth-child(2):hover>a,
          #mainnav>ul>li:nth-child(2).on>a{background:#fff; color:#4CB748; border-color: #4CB748}
          #mainnav>ul>li:nth-child(3):hover>a,
          #mainnav>ul>li:nth-child(3).on>a{background:#fff; color:#F0493E; border-color: #F0493E;}
          #mainnav>ul>li:nth-child(4):hover>a,
          #mainnav>ul>li:nth-child(4).on>a{background:#fff; color:#40C4E0; border-color: #40C4E0}
          #mainnav>ul>li:nth-child(5):hover>a,
          #mainnav>ul>li:nth-child(5).on>a{background:#fff; color:#005DAC; border-color: #005DAC;}
          #mainnav>ul>li:nth-child(6):hover>a,
          #mainnav>ul>li:nth-child(6).on>a{background:#fff; color:#6F33A4; border-color: #6F33A4;}
#mainnav a{line-height:2em;padding:0 1em;display:inline-block;color:#fff;text-decoration:none;}
/*dhtml*/
#mainnav li ul{z-index:1;width:14.38em;padding:1.25em 0 1em;background:#fff;position:absolute;overflow:auto;height:auto}
#mainnav>ul>li:last-child ul{right:0}
#mainnav li ul li{width:100%;display:block;float:left}
#mainnav li ul li a{font-weight:500; background: none; font-size:1rem; color:#000; line-height: 1.1em;padding:.5em 1.25em; display:block;width:100%;text-align:left;float:left}
#mainnav li ul li a:hover, .t1 li ul li a:active{color:#fff}
     #mainnav>ul>li:first-child>ul li a:hover {background:#F6871F}
     #mainnav>ul>li:nth-child(2)>ul li a:hover {background:#4CB748}
     #mainnav>ul>li:nth-child(3)>ul li a:hover {background:#F0493E}
     #mainnav>ul>li:nth-child(4)>ul li a:hover {background:#40C4E0}
     #mainnav>ul>li:nth-child(5)>ul li a:hover {background:#005DAC}
     #mainnav>ul>li:nth-child(6)>ul li a:hover {background:#6F33A4}

/* new css drop downs */
#mainnav li ul {top: -200vh;opacity: 0;z-index: -1;visibility: hidden; transition: ease 200ms opacity 0.35s;}
#mainnav li:hover ul {top:calc(100% - 0.5em);visibility:visible;  opacity: 1;z-index: 1;}


/* mobile */
#mobilenav,.menu{display: none}




/* MAIN ------------------------------ */
main>div>aside{width:13rem; margin-top: 5em;float: left;}
body.fullWidth  #content {width: 100%;margin: 0 auto;float: none; padding: 0 12% 8em}
.interior main {
     position: relative;
     background: url(/images/kid-wheelchair.svg) no-repeat, url(/images/kid-jump-rope-interior.svg) no-repeat #fff; 
     background-position: calc(50% - 43em) 100%, calc(50% + 43em) 19% /*28.13em*/
}
.interior main:before {content: ""; position: absolute; display: block; width: 15.63em; height: 12.38em; background: url(/images/kids-high-five.svg) no-repeat center; top: -5.5em; left: calc(50% - 42em);}
.fullWidth.interior main:before {left: calc(50% - 47em)}
.home main {overflow: hidden}
main>.wrap{padding-top:3.56em}
hr {margin: 3em 0}

/* content */
#content {float:right;width:calc(100% - 16.75rem); padding:0 11.47% 15em 0;overflow:hidden;min-height:600px;position:relative}
#content.fullWidth {float:none;margin: 0 auto}
.wsManagementLogin td:first-child {width:40%; text-align: right}

.twoCol, .threeCol, .resCol{
-webkit-column-rule:none;
   -moz-column-rule:none;
        column-rule:none;
}

.threeCol {-webkit-columns:3;-moz-columns:3;columns:3;}
.resCol {
	-webkit-columns: auto;-moz-columns: auto;columns: auto;
	-webkit-column-width: 13em;-moz-column-width: 13em;column-width: 13em;
}

.twoCol {overflow: auto}
.twoCol > * {width:50%; float: left; overflow: auto;margin-bottom: 2em}

.formTable td{width:50%}
.formTable td{padding:0 0 .5em .5em}
.formTable td:first-child{padding:0 .5em .5em 0}
.formTable td[colspan="2"]{padding-right:0}
.formTable.formLoose,.formTable.formLoose td{width:auto}

.photoright{margin:1em 0 3em 4em;}
.photoleft{margin:1em 4em 3em 0;}
     #content .photoright.smaller,
     #content .photoleft.smaller {max-width: 30%}
.photoright figcaption {text-align: right}

.pageHeader{width:100%; position: relative;z-index: 1; float:left; height:16.88rem; clear: both; background-size: cover; background-position: center}
.content .highlight{margin: 3em 0; clear: both}
.content .highlight h2 {font-size: 1.56rem}
.content blockquote {text-align: right; float: right; max-width: 18.75rem; margin: 0 0 2em 2em}

.CTA {padding: 10.94em 1em 14em}
.CTA h2 {font-size: 2.5em; margin-bottom: 0}
.CTA p {font-size: 1.25em;}
.CTA .button {margin-top: 1em}

.home h1,
.home h2 {font-size: 2.5rem; margin-bottom: 0.5em}

#new-patient {padding: 4.5em 1em 6em; z-index: 1; position: relative}
#new-patient:before {content: ""; transform: translate(40%, 50%) rotate(-20deg);transform-origin: bottom left; transition: ease all 0.5s; opacity:0; position: absolute; top:-6.5em; right: calc(50% - 39.5em); display: block; width: 15.63em; height: 12.38em; background: url(/images/kids-high-five.svg) no-repeat center}
     #new-patient.play:before {transform: none; opacity: 1}
#new-patient .wrap {max-width: 40.63em; margin: 0 auto}
#new-patient .wrap .button {margin-top: 1em}
#value-points {padding: 6.38em 1em; position: relative}
#value-points:before {content: ""; transform: translate(-40%, 50%) rotate(20deg); transform-origin: bottom right; transition: ease all 0.5s; opacity:0; position: absolute; top:-9.5em; left: calc(50% - 40.5em); display: block; width: 10.44em; height: 13.06em; background: url(/images/kid-jump-rope-interior.svg) no-repeat center}
     #value-points.play:before {transform: none; opacity: 1}
#value-points .point {max-width: 63em; padding: 4.38em 1em 5.38em 4em; margin: 0 auto;transform: translateX(50%); transition: ease all 0.5s; opacity:0;
     display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start}
#value-points .point:nth-child(even) {transform: translateX(-50%)}
#value-points .point.play {transform: none; opacity: 1}
#value-points .point:nth-of-type(even) {text-align: right; padding-right: 5.63em; background: url(/images/home/value-bg.svg) no-repeat top left; background-size: 100% 100%;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;}
#value-points .point img {max-width: 309px; height: auto}
#value-points .point div {padding-top: 2em}
#value-points .point:nth-of-type(odd) img {margin-right: 3.75em}
#value-points .point:nth-of-type(even) img {margin-left: 6.44em; order: 2}
#value-points .point:nth-of-type(even) div {padding-left: 3em}
#value-points .point p {max-width: 24rem}
#value-points .point .button {margin-top: 1.25em}
#value-points .point div :last-child {margin-bottom: 0}
#welcome {position: relative}
#welcome .wrap {max-width: 40.63em; padding: 7.13em 1em; margin: 0 auto}
#welcome .button {margin: 1.75em 0.25em 0}
#welcome:before {content: ""; transform: translateX(-200%); transition: ease-out all 0.5s; opacity:0; position: absolute; top: -13em; right: calc(50% - 36.5em); display: block; width: 10.63em; height: 14.38em; background: url(/images/kid-wheelchair.svg) no-repeat center;}
     #welcome.play:before {transform: none; opacity: 1}
#recent-news {padding: 5.63em 1em; position: relative; background: url(/images/home/3-crayons.svg) no-repeat; background-position: calc(50% + 40em) calc(100% + 30px)}
#recent-news:before {content: ""; position: absolute; left: calc(50% - 43em); top: -4.69em; display: block; width: 3.69em; height: 25.06em; background: url(/images/home/red-crayon.svg) no-repeat center; transform: rotate(20deg)}
#recent-news h2 {margin-bottom: 0.75em}
#recent-news .wrap {max-width: 57.5em; position: relative; margin: 0 auto}
#recent-news ul {column-width: 20em; column-gap: 6em}
#recent-news li {break-inside: avoid}
#recent-news li a {background: none}
#recent-news li:nth-child(2n+2) {margin-top: 1em; padding-top: 1em; background: url(/images/hr.svg) repeat-x top left}
#recent-news .more {position: absolute; top:0; right:0; padding: 0.25em}

#alertApp {padding: 1em}
#alertApp h1{font-size: 1.25em}


/* FOOTER ------------------------------ */
body>footer .fatFooter > * {width: 33%; float: left}

.mc-field-group.half {
     width: 49%;
     float: left;
     margin-bottom: .5em;
     margin-left: 0;
 }
 .mc-field-group.half:nth-child(2n) {
     margin-left: 2%;
 }


 .mc-field-group.half input, .mc-field-group.full input {width: 100%;}


@media screen and (min-width: 1401px) {
     #value-points {color:#fff; 
          background: url(/images/home/blue-line-top.svg) no-repeat, url(/images/home/blue-line-bottom.svg) no-repeat #40C4E0; 
          background-position: -5px -3px, 0 calc(100% + 2px);
          background-size: calc(100% + 20px) auto, 100% auto
     }
     .CTA {
          background-size: auto, 102% 4em;
          background-position: -12px calc(100% + 16.5em), -6px 0;
     }
}
@media screen and (max-width: 1300px) {
    .interior main {background-position: calc(50% - 45em) 100%, calc(100% + 1em) 19%}
}
@media screen and (max-width: 1200px) {
     #new-patient:before,
     #welcome:before {right:1em}
     #value-points:before {left:1em}
}
@media screen and (max-width:1100px) {
     #content {padding: 0 5% 2em 0}
     .interior main {background:#fff}
     .interior main:before {width: 10.63em; height: 15.38em; background: url(/images/kids-high-five.svg) no-repeat center; top: -5.5em; left: 0; background-size: contain;}
}
@media screen and (max-width: 900px) {
     #new-patient:before {width: 10em; background-size: contain}
     #value-points:before {width: 7em; top: -8em; background-size: contain}
     #welcome:before {width: 8em; top:-10em; right:calc(50% - 5em); background-size: contain}
     #mainnav > ul > li > a,
     #mainnav > ul > li:nth-child(even) > a,
     #mainnav > ul > li:nth-child(odd) > a {font-size: 0.9em; padding: 0 1.125em}
     #value-points {padding: 1em 1em 10em}
     #value-points .point,
     #value-points .point:nth-of-type(even) {text-align: center; display: block; padding: 3em 4em 4em}
     #value-points .point + .point {margin-top: 2em}
     #value-points .point:nth-of-type(even) div {padding: 0}
     #value-points .point p {margin: 0 auto}
     #value-points .point:nth-of-type(odd) img {max-width: 16em; display: block;  margin: 0 auto 1em}
     #value-points .point:nth-of-type(even) img {max-width: 16em; display: block;  margin: 0 auto 1em}
     #value-points h2::before {content: ""; position: absolute; top: 50%; transform: translateY(-50%); display: block; height: 0.38rem; width: 200%; border-top: 1px solid #000; border-bottom: 1px solid #000; left:calc(100% + 0.3em)}
     #value-points h2::after {left:auto; right:calc(100% + 0.3em)}
}