/**************************************************************************/
/** Fonts
/**************************************************************************/

@import url(//fonts.googleapis.com/css?family=Cinzel);

@font-face{
    font-family:"Avenir-Light";
    src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/edefe737-dc78-4aa3-ad03-3c6f908330ed.eot?#iefix") format("eot"),
        url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/0078f486-8e52-42c0-ad81-3c8d3d43f48e.woff2") format("woff2"),
        url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/908c4810-64db-4b46-bb8e-823eb41f68c0.woff") format("woff"),
        url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/4577388c-510f-4366-addb-8b663bcc762a.ttf") format("truetype"),
        url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/b0268c31-e450-4159-bfea-e0d20e2b5c0c.svg#b0268c31-e450-4159-bfea-e0d20e2b5c0c") format("svg");
}



/**************************************************************************/
/** General
/**************************************************************************/

html, body {
    height:100%;
    margin:0;
}

body {
    background-color: #efefef;
}

body, textarea, input, select, td, th {
    font: normal normal normal 16px/1.4em avenir-light,sans-serif;
    color: #303131;
}

input, select, textarea { /* Allows overriding native style of form elements on iPad */
    -webkit-appearance: none;
    -webkit-border-radius:0;
    border-radius: 0;
}

*:focus, select:focus, textarea:focus, input:focus{
    outline:0;
}


table { border-collapse: collapse; }

img, td {
    padding:0px;
}

hr {
  height: 0px;
  margin: 25px 0 5px -1px;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #B5C4Df;
  font-size: 1px;
}


a, a:visited {color:#3366CC;}
a:hover {color:#FF3300;}


h1, h2, h3 {
    font: normal normal normal 40px/1.4em cinzel,serif;
    margin-left: 0px; margin-right: 0px;
    color: #003366;
    border: 0 none;
}

h1 {
    font-size: 32pt;
    margin: 30px 0 15px 0;
}

h2, h2 a, h2 a:visited, h2 a:hover{


    font-size: 24pt;
    margin: 30px 0 15px 0;

}

h3{
    font-size: 16pt;
    margin-top: 20px; margin-bottom: 3px;
    padding-bottom: 3px;
}



/**************************************************************************/
/** Container
/**************************************************************************/

.mainDiv {
    width: 800px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}


/**************************************************************************/
/** Header
/**************************************************************************/



.header {
    background-color: #575757;
    /*background: linear-gradient(45deg, #575757 20%, #818181 100%);*/
    background: linear-gradient(45deg, #4e4e4e 20%, #7c7c7c 100%);
    padding: 20px 0;
    height: 152px;
}

.header a {
    text-decoration: none;
}

.header .image {
    background-image: url("/images/ab.svg");
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-size: contain;
}



/**************************************************************************/
/** Menu Button
/**************************************************************************/

.menu-button {
    width: 53px;
    height: 53px;
    position: absolute;
    right: 0;
    z-index: 1;
    opacity: 0;
}


.menu-button-container {
  height: 100%;
  width: 30px;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 28px;
}


.menu-button-icon,
.menu-button-icon::before,
.menu-button-icon::after {
  display: block;
  background-color: #ebebeb;
  position: absolute;
  height: 3px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button-icon::before {
  content: '';
  margin-top: -10px;
}

.menu-button-icon::after {
  content: '';
  margin-top: 10px;
}



/**************************************************************************/
/** Tabs
/**************************************************************************/

.tabbar {
    background-color: #E94900;
    height: 30px;
    position: relative;
    font-family: helvetica,arial,verdana,sans-serif;
    font-size:14px;
    overflow: hidden;
}

.tabs {
    position: absolute;
    right: 0px;
    bottom: 0;
    text-align: left;
    width:450px;
}

.tabs div {
    position: relative;
    display: inline-block;

    height: 29px;
    line-height: 29px;
    padding: 0 16px;
    margin-left: -1px;
    z-index: 0;

    border: 1px solid #FFC465;
    border-bottom: 0 none;

    /*background: #585954;*/
    background: -moz-linear-gradient(#FFA400, #F97300);
    background: -webkit-linear-gradient(#FFA400, #F97300);
    background: linear-gradient(#FFA400, #F97300);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',
                startColorstr=#FFA400, endColorstr=#F97300);
}

.tabs div:hover,
.tabs div:focus{
    background: #000000;
    background: -moz-linear-gradient(#FFA400, #E94900);
    background: -webkit-linear-gradient(#FFA400, #E94900);
    background: linear-gradient(#FFA400, #E94900);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',
                startColorstr=#FFA400, endColorstr=#E94900);
}


.tabs div.active {
    padding-top: 3px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-color: #ffffff;

    background: #E0E0E0;
    background: -moz-linear-gradient(#FFFFFF, #E0E0E0);
    background: -webkit-linear-gradient(#FFFFFF, #E0E0E0);
    background: linear-gradient(#FFFFFF, #E0E0E0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',
                startColorstr=#FFFFFF, endColorstr=#E0E0E0);

    z-index: 1;
}


.tabs a,
.tabs a:hover,
.tabs a:focus {
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.tabs a .active {
    color: #454545;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.75);
}


/**************************************************************************/
/** Navbar
/**************************************************************************/

.navbar {
    background-color: #E0E0E0;
    height: 5px;
}


/**************************************************************************/
/** content
/**************************************************************************/

.body-row {
    height:100%;
}

.content-container {
    padding: 20px 20px 0 20px;
    background-color: #fff;
    border: 1px solid #dcdcdc;
}

#content{
    width: 100%;
}


/**************************************************************************/
/** Checks and Arrow Bullets
/**************************************************************************/

.checks ul, .arrows ul{
    margin-left:0px;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    list-style-type: none;
}

.checks ul ul, .arrows ul ul {
    padding-left:20px;
    padding-bottom:10px;
}

.arrows ul {
    margin-left:18px;
}

.arrows ul li {
    background-image: url(../images/sm_arrow.gif);
    background-repeat: no-repeat;
    background-position: 0em .4em;
    padding-left: 18px;
    line-height:160%;
}

.checks ul li {
    background-image: url(../images/check_green.png);
    background-repeat: no-repeat;
    background-position: 0em .3em;
    padding-left: 25px;
    padding-top: 3px;
    line-height:160%;
}


.checks ul ul li {
    background-image: url(../images/sm_arrow.gif);
    background-repeat: no-repeat;
    background-position: 1em .5em;
    padding-left: 32px;
    line-height:160%;
}



/**************************************************************************/
/** Form Inputs
/**************************************************************************/

.form-input {

    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;


    color: #363636;
    display: inline-block;
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    padding: 2px 4px;
    vertical-align: middle;


    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;


    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;

    box-sizing: border-box;
}

.form-input:focus {
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    outline: 0 none;
}

.form-label {
    color:#003366;
    white-space: nowrap;
    cursor: default;
    padding: 5px 10px 0 0;
    vertical-align: top;
}


/**************************************************************************/
/** Contact Form
/**************************************************************************/

.contact-form {
    width: 615px;
    margin: 0 auto;
    position: relative;
}

.contact-form .form-label,
.contact-form .form-input {
    text-align: left;
}

.contact-form .form-input {
    margin-top: 0px;
    margin-bottom: 10px;
    padding-left: 10px;
    width:100%;
    height:40px;
    font-size: inherit;
    color: #565656;
}

.contact-form .form-input textarea {
    height: 300px;
    line-height: 20px;
    padding-top: 10px;
}


/**************************************************************************/
/** Contact Phone
/**************************************************************************/

.contact-phone {
    border: 1px solid #d5d7da;
    text-align: center;
    padding: 10px;
    box-shadow: 3px 3px 8px 0px #cacaca;
    position: relative;
    background-color: #eaf6ea;
    color: #003366;
    margin: 15px;
    float: left;
    width: 250px;
    border-radius: 36px;
    height: 36px;
    display: inline-block;
    cursor: pointer;
}

.contact-phone:hover {
    background-color: #ebffeb;
    transition: box-shadow 0.2s;

    border: 1px solid #4ea9ff;
    -webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
    box-shadow: 0 2px 20px 2px #4ea9ff;
}

.contact-phone .fa-solid.fa-phone {
    display: inline-block;
    position: absolute;
    right: 4px;
    border: 1px solid #55a759;
    border-radius: 50%;
    padding: 10px;
    top: 9px;
    background-color: #52b756;
    color: #fff;
}

.contact-phone-number {
    font-size: 26px;
    line-height: 22px;
}

.contact-phone-location {
    line-height: 20px;
}


/**************************************************************************/
/** Footer
/**************************************************************************/

.copyright{
    font-size: 12px;
    color: #818181;
    padding-top:10px;
    padding-bottom:5px;
}



/**************************************************************************/
/** Locations
/**************************************************************************/


div#locations > div {
    display: inline-block;
    width: 100%;
}




.hideIfPhone{
    display: block;
}


.showIfPhone {
    display: none;
}




/*320-480 min-width:320px*/
/* smartphones, iPhone, portrait 480x320 phones */
@media (min-width:1px)  {


    .mainDiv {
        width: 100%;
    }

    .header {
        height:107px;
    }

    .hideIfPhone{
        display: none;
    }


    .showIfPhone {
        display: block;
    }

    .tabbar {
        background: linear-gradient(to left, #f46b45, #eea849);
        border-bottom: 1px solid #dcdcdc;
        overflow: initial;
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 100% 60px;
        background-repeat: no-repeat;
        top: 0;
    }


    .tabs {
        position: absolute;
        background: #ededed;

        /* Hide the menu off-screen to the left */
        right: -100%;
        -webkit-transition: right 0.3s ease;
        -o-transition: left 0.3s ease;
        transition: right 0.3s ease;
        top: 58px;
        display: inline-block;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        width: 0px;
    }

    .tabs div {
        padding: 0 30px;
        font-size: 22px;
        width: 100%;
        background: #000;
        font: normal normal normal 16px/1.4em avenir-lt-w01_35-light1475496,sans-serif;
        line-height: 50px;
        height: 50px;
        border: 1px solid #777;
    }

    /*
     * Slide the menu in from left when the input is checked
     */
    .tabbar input:checked ~ div {
        right: 0;
        width: 100%;
        height: 100%;
        background-color: #4a4a4a;
        z-index: 2;
    }



    .navbar {
        height: 60px;
        background-color: #fff;
        background-image: none;
        background-image: url("../images/logos/apple-touch-icon.png");
        background-repeat: no-repeat;
        background-size: 54px;
        background-position-x: 4px;
        background-position-y: 7px;
        padding: 12px 0 0 67px;
    }




    .navbar:after {
        content: "Advanced Neuromuscular Physiotherapy, LLC";
        line-height: 26px;
        color: #ef9e48;
        /* text-shadow: 1px 1px 3px rgb(0 0 0 / 22%); */
        font-family: cinzel,serif,'Times New Roman';
        font-size: 20px;
    }

    .body-row > div {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .content-container {
        border: 0 none;
        border-bottom: 1px solid #dcdcdc;
    }

    .contact-form {
        width:100%;
    }

    .contact-phone {
        width: 250px;
    }

}


/*400-480*/
@media (min-width:400px)  {

    .navbar:after {
        font-size: 23px;
    }

    .contact-phone {
        width: 300px;
    }
}




/*480-640*/
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
@media (min-width:481px)  {

    body {
        overflow-y: clip;
    }

    .mainDiv {
        width: 100%;
    }

    .header {
        height:122px;
    }

    .hideIfPhone{
        display: block;
    }

    .showIfPhone {
        display: none;
    }



    .tabbar {
        background: #E94900;
        height: 30px;
        position: relative;
        overflow: hidden;
    }

    .tabs{
        width: 800px;
        overflow-x: hidden;
        overflow-y: hidden;
        right: 0;
        top: -3px;
        background: initial;
        left: 16px;
        height: 33px;
    }


    .tabs div {
        font: inherit;
        width: inherit;
        height: 29px;
        line-height: 29px;
        padding: 0 16px;


        background: -moz-linear-gradient(#FFA400, #F97300);
        background: -webkit-linear-gradient(#FFA400, #F97300);
        background: linear-gradient(#FFA400, #F97300);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',
                    startColorstr=#FFA400, endColorstr=#F97300);

        border: 1px solid #FFC465;
    }


    .navbar {
        background-color: #E0E0E0;
        background-image: none;
        height: 3px;
        padding: 0;
    }

    .navbar:after {
        content: "";
    }

    .body-row > div {
        overflow: initial;
    }
    .content-container {
        border: 1px solid #dcdcdc;
    }

    .contact-phone {
        width: 250px;
    }

}

/*640-960*/
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
@media (min-width:641px)  {

    body {
        overflow-y: auto;
    }

    .mainDiv {
        width: 100%;
    }


    .header {
        height:152px;
    }

    .hideIfPhone{
        display: block;
    }

    .tabs{
        width: 100%;
    }

    .contact-form {
        width: 615px;
    }
}


/* Desktops bigger than 800 but less than 961.  */
@media (min-width:810px)  {


    .mainDiv {
        width: 800px;
    }


    .header {
        height:152px;
    }

    .hideIfPhone{
        display: block;
    }

    .tabs{
        width: 100%;
    }
}


/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width:961px)  {


    .mainDiv {
        width: 100%;
    }


    .header {
        height: 152px;
    }

    .hideIfPhone{
        display: block;
    }


    .tabs{
        width: 100%;
    }
}

/* big landscape tablets, laptops, and desktops */
@media (min-width:1025px) {


    .mainDiv {
        width: 1052px;
    }

    #content{
        width: 100%;
    }


    .header {
        height: 152px;
    }

    .hideIfPhone{
        display: block;
    }

    .tabs{
        width: 100%;
    }
}

/* hi-res laptops and desktops */
@media (min-width:1281px) {



    .mainDiv {
        width: 1052px;
    }

    #content{
        width: 100%;
    }

    .header {
        height: 152px;
    }

    .hideIfPhone{
        display: block;
    }

    .tabs{
        width: 100%;
    }
}