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

#brand {display: flex;justify-content: center;text-align: center;padding: .5em 0.25em;}
#brand img {max-width: clamp(7rem, 5.512rem + 7.44vw, 9rem);height: auto;display: block;margin: 0 .5em;}

figure {margin: 1em 0 1.5em !important;}

/* addon classes */
.twoCol, .threeCol, .resCol{
-webkit-column-rule:1px outset rgba(0,0,0,.15);
        column-rule:1px outset rgba(0,0,0,.15);
-webkit-columns: auto;
        columns: auto;
-webkit-column-width: 13em;
        column-width: 13em;}

/* list */
.content ul li {padding-left: 1.5em;}
.content ul li:before {left:0.75em}
.content ol {margin-left: 0}

/* forms */
.formTable, .formTable table{width:100%;display: block}
.formTable tbody{display: block}
.formTable tr{display: block}
.formTable td{display: block;width:100%;padding: 0}
.formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable textarea, .formTable select{margin-bottom:1em}

/* nav */
#navContainer{position: fixed;font-family: "futura-pt", sans-serif; left: 100%;top:0;bottom:0;width: 75%; height: 100%; overflow: auto; padding-bottom: 3em; background-color:#05347A;z-index:99;-webkit-transition: left 200ms ease;transition: left 200ms ease}
.slideNav #navContainer{left: 25%; -webkit-box-shadow: 0 0 130px 70px rgba(255,255,255,0.75); box-shadow: 0 0 130px 70px rgba(255,255,255,0.75)}
/* #navContainer nav{display: inline} */
#navContainer ul{display: block;float: left;width: 100%;margin: 0;padding-left: 0}
#navContainer #mainnav {border-top: 1px solid rgba(255,255,255,0.25)}
#navContainer li{display:block;border-bottom: 1px solid rgba(255,255,255,0.25); float: left;width: 100%; position: relative}
#navContainer a, #navContainer .menu{color:#fff; font-size: 1.25rem; line-height:2.5rem;padding:0 1rem;display:block;
/* float: left; */
width: 100%}
#navContainer a:hover,#navContainer .menu:hover,
#navContainer li.on>a{background-color:#F68A32;color: #fff}
#navContainer li.open{background-color: rgba(0,0,0,0.5)}
#navContainer li>span{color: #000;background-color:#fff;opacity: .2; border-radius: 50%; display: block;position: absolute;right: .5em;top: .5em;line-height: 1.5em;width:1.5em;text-align: center;-webkit-transition: transform .2s ease;-webkit-transition: -webkit-transform .2s ease;transition: -webkit-transform .2s ease;transition: transform .2s ease;transition: transform .2s ease, -webkit-transform .2s ease}
#navContainer li>span:hover, #navContainer li.on>span{opacity: .4}
#navContainer li>span:before{content: "\25B8"}
#navContainer li.open>span{-webkit-transform: rotate(90deg);transform: rotate(90deg)}
#navContainer ul ul {font-size: .8em;}
#navContainer ul ul li {position: relative; border-top: 1px solid rgba(255,255,255,0.125); border-bottom:0}
#navContainer ul ul li:before {content: "-"; font-size: .8rem; position: absolute; left: 1.2rem; color: rgba(255,255,255,0.5); top: 0.25rem;}
#navContainer ul ul a {padding: 0.4em 1.5rem 0.4em 2em; line-height: 120%; font-size: 1rem;}
#navContainer ul ul ul li a {padding-left:3em;}
#navContainer ul ul ul li:before {left: 2.25rem;}
#navContainer ul ul ul li>span{top: .75em;}

#mobilenav{background-color: #05347A; font-family: "futura-pt", sans-serif; border-bottom: 2px solid #fff;
        /* float: left; */
        width: 100%;text-align: center;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;}
#mobilenav a, #mobilenav span{color: #fff;line-height: 2.5em;
    -ms-flex-order: 0;
    -webkit-box-ordinal-group: 1;
            order: 0;
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;}
#mobilenav a:hover, #mobilenav span:hover{color: #fff;background-color:#F68A32}
#mobilenav *+* {border-left: 1px solid rgba(255,255,255,0.25)}
#mobilenav span:after{content: ""; display: inline-block; width: 0.75em; height: 0.75em; background: url(/images/m/hamburger-white.svg) no-repeat center; background-size: contain; margin-left: 0.5em;}
.hamburger{height: 2em;width: 2em;display: block;position: fixed;right: 0;top:0;opacity: .5;background: url(/images/m/hamburger.svg);background-size: cover;z-index:10;opacity: 0}
.hamburger.on{opacity: .5}

#ancillary form {padding: 1em; width: 100%; clear: both}
#ancillary form input {width: calc(100% - 2.5rem); float: left; border-radius: 0; height: 2.5rem}
#ancillary form button {height: 2.5rem; border-radius: 0; padding: 0; width: 2.5rem;float: right; background: url(/images/icons/misc/search.svg) no-repeat center #F68A32;}

#signup .form h2{font-size: 1.15em}
#signup .wrap {padding: 1em 1em;max-width:90vw}
.close{font-size:2rem;width: 2rem;height: 2rem;line-height: 2rem;}
#signup input[type="text"],#signup select {padding: .25em .25em}
/* content */
#content .photoright, #content .photoleft {margin:0 0 .75em 0;width: 100%;max-width: 100%; display: block}
#content .photoright img, #content .photoleft img {max-width: 100%; height: auto}

.home > main > section:not(#photoRotator),
.home > main > .welcome,
.CTA {
        /* float: left; clear: both;  */
        width: 100%; text-align: center;  padding: 4em 1em}
.home > main > * .button,
.landing > main > * .button {margin: 0.75em 0 0;}
.home > main > * h1,
.home > main > * h2 {font-size: 1.75em}
#product-callouts h2 span {font-size: 1.25rem}
.down {position: relative; z-index: 2; margin: -1.5em auto; display: block; width: 2.75em; height: 2.75em; background: url(/images/icons/misc/orange-down-arrow.svg) no-repeat center #fff; border-radius: 50%;}
#product-callouts ul {margin: 0}
#product-callouts a:after {content: "\203a";}
#product-callouts a div {margin-bottom: 0.5em}
#product-callouts a div:before {opacity: 0.85}
#product-callouts a div p {opacity: 1; padding: 0 1.5rem}
#clinic-locations {background: #E8F1F9}
#clinic-locations p {margin: 0}
#content #clinic-locations p a {margin-top: 2em; font-family: "futura-pt", sans-serif; background: #F68A32; font-size: 1.125rem; border-radius: 1.25rem; display: inline-block; color: #fff; border: 0; padding: 0 1.75em; line-height: 2.5rem; cursor: pointer;}
#blogs h2 {margin-bottom: 0}
#blogs article {margin-top: 1.5em; padding-top: 1.5em;}
#blogs article+article {border-top: 1px solid rgba(255,255,255,0.25)}

.down {display: none}

.landing #top .title {padding: 6em 1rem; border: 0; border-radius: 0}
.landing #top .title h1 {font-size:1.75em; line-height: 120%; margin: 0}
.landing .more {padding: 3em 1em}
.landing main h2 {font-size: 1.75em}
.landing main p, .home main p {font-size: 1.125em}
.landing #treatment-options .form {padding: 3em 1em 4em; width: 100%; max-width:100%; text-align: center; background: #F4F8FD;border: 0;border-radius: 0;}
.landing #treatment-options .form [type="submit"] {width: 100%; margin-top: 1em}
.landing #clinicians {padding: 4em 1em; text-align: center}
.landing #clinicians .wrap {padding-bottom: 0.5em}
.landing #clinicians .find form {background: none;overflow: auto;padding: 0;border: 0;border-radius: 0;}
.landing #clinicians .featured-clinician {float: left; clear: both; width: 100%; padding: 3em 1em 0}
.landing #clinicians .featured-clinician a div {margin-bottom: 0.75em}
.landing #appointment, .landing #testimonial {padding: 4em 1em}
.landing .text-and-image {padding: 4em 1em; text-align: center}
.landing .text-and-image .product-brief p {margin-bottom: 1em}
.landing .text-and-image .images {position: relative; width:100%; padding-bottom: 100%; background-size: contain; background-position: center; background-repeat: no-repeat}
   .landing .text-and-image:first-child .images {background-image: url(/images/m/product-1.png)}
   .landing .text-and-image:nth-child(2) .images {background-image: url(/images/m/product-2.png)}
   .landing .text-and-image:nth-child(3) .images {background-image: url(/images/m/product-3.png)}
   .landing .text-and-image:nth-child(4) .images {background-image: url(/images/m/product-4.png)}
   .landing .text-and-image:nth-child(5) .images {background-image: url(/images/m/product-5.png)}
.landing .text-and-image .images > div {display: none}
.landing blockquote {margin: 0}

.landing #treatment-options .form form div > input:not([type="submit"]),
.landing #treatment-options .form form div > select {width:100%; float: left}

#content #clinics-map {display: none}
#content .form-options form * {display: block; width:100%; margin-bottom: 0.5em}
#content .info-list:not(.partners-list)>li {padding: 0}
   #content .info-list.partners-list>li {margin-bottom: 2.5em}
#content .info-list:not(.partners-list)>li:before {display: none}
#content .info-list:not(.partners-list)>li+li {margin-top: 1em; padding-top: 1em; border-top: 1px solid #ececec}
#content .info-list div {width: 100%; height: 5em; position: relative}
#content .info-list div img {position: absolute; top:0; left: 0; max-width: 100%; max-height: 100%; height: auto}
   #content .info-list.clinician-list div {margin-bottom: 1em; height: 8em; float: left}
   #content .info-list.clinician-list div img {position: relative; max-height: 8em; float: left}
   #content .info-list.clinician-list>li div a {float: left}
   #content .info-list.clinician-list>li .button {font-size: 1rem}
#content .info-list.partners-list {margin-bottom: 6em}

#content > .right {margin-bottom: 1em}
#content > .left {padding-bottom: 3em}
#content .clinic-contact {margin: 0 0 2em}
#content label {display:block}

#content video {height: auto !important; width: 100% !important;}

.tableWrap img {height: auto; width: 100%;}

/* main */
main{padding-left: 1rem;padding-right: 1rem}

.verticalText {width: 100%;}

.haveAQuestion {
 display: none;
}

/* footer */
body>footer {text-align: center}
body>footer .fatFooter .social {float: none; display: inline-block; vertical-align: top}
body>footer nav {display: block}
body>footer .wrap{font-size: 0.85em;
	display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -ms-flex-align: stretch;
    -webkit-box-align: stretch;
            align-items: stretch;
}
#web-solutions-exposure{
 -ms-flex-order: 1;
 -webkit-box-ordinal-group: 2;
         order: 1;
}
body>footer .wrap nav a+span:before {content: "|"; margin: 0 0.5em}
body>footer .fatFooter .youtube:before {left:1px;}
body>footer > .fatFooter > div:last-child a.button:nth-last-of-type(-n+2) {display: table;margin-left: auto;margin-right: auto;}

/* brace customization */
.patternbox {
        width: 45%;
        margin: .5em 0;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
}

.brace {
        display: inline-block;
}

.brace-options-box {
        -ms-flex-pack: distribute;
            justify-content: space-around;
}
.brace-options h2 {
        margin: 1em 0;
        text-align: center;
        padding-top: 2em;
}
#custom-brace h1 { text-align: center;}
.brace-buttons {text-align: center; margin-bottom: 2.5em;}
.brace-buttons a { margin-top:.5em;}
#custom-brace > .wrap > #content  .left  {
        padding-bottom: 0;
        line-height: 0;
        text-align: center;

}
#custom-brace > .wrap > #content  .right  {margin-bottom: 2em;}
.brace img {
        height: 30em;

}

#pattern-name {
        font-size: 1.4em;
        margin-top: -1em;
}

.brace-options-buttons {flex-direction: column; align-items: center; justify-content: center;}
.brace-options-buttons .button {width: 100%;}
.brace-options-buttons .button + .button {margin-top: 1rem;}


@media screen and (max-width: 40.625em) {

        #custom-brace > .wrap {padding: 3.13em 2em 0;}
}

@media screen and (max-width:575px) {
    .comparison, .comparison th, .comparison td {display: block;}
    .comparison {border-bottom: 3px solid #F68A32;}
    .comparison th {
        position: absolute;
		top: -9999px;
		left: -9999px;
    }
    .comparison td {
        border-bottom: 1px solid #ccc;
        padding-left: 50%;
        position: relative;
        text-align: center;
        width: 100%;
    }
    .comparison td:before {
        color: #000;
		position: absolute;
		top: .5em;
		left: .75em;
		width: 45%;
		padding-right: 10px;
        text-align: left;
		white-space: nowrap;
	}
    .comparison td:first-child {
        border-top: 3px solid #F68A32;
        font-size: 1.2em;
        font-weight: 500;
        padding-left: .75em;
        width: 100%;
    }
    .comparison td:nth-child(n+2) {font-weight: 400;}

    .comparison td:nth-of-type(2):before {content: "Boston Brace Original"; }
	.comparison td:nth-of-type(3):before {content: "Boston Brace 3D"; }
	.comparison td:nth-of-type(4):before {content: "Rigo-Cheneau"; }
}
/* 450 / 16 = 28.125 */
@media screen and (max-width: 28.125em) {
        #custom-brace > .wrap {padding: 2.13em 5vw 0;}
        .patternbox {width: 90%}
        .brace-options-box {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
    /*    .brace img {height: 23em; margin-bottom: -4em;} */
        #pattern-name {margin-top: 1em;}
        .brace-options-buttons .button {font-size: 1.125rem;}

        body>footer>.fatFooter>div:last-child .button {font-size: 1em; display: table; margin-left: auto; margin-right: auto;}
}

/* internet explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        #custom-brace .left .brace img {
                height: 95%;
        }
   }