/*  
    Stylesheet for Sports & Family Physio Website v2.0 
    Last updated: 24 April 2015 
*/

body {
    background: #fff;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1b1b1b;
}

h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    color: #064780;
}

ul, ol, dl {list-style: disc;}

p {font-size: 1rem;}

a {color: #064780;}
a:hover {color: #0854c7;}

.panel.callout {
    border: 1px solid #cdefff;
    background: #E5F7FF;
}

.bg-slideshow {
    width: 100%;   
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: #fff;
}

.bg-slideshow img {
    width: 100%;   
}

.bg-slideshow button {
    display: none !important;   
}

.flex-video {
    padding-bottom: 20%;
    padding-top: 20%;
}

header.content {
    height: 11rem;   
}

header #menu {
    background: #fff;
    top: 1.5rem;
    min-height: 8rem;
    opacity: 0.9;
}

header #menu.expanded .title-area {
    background: #fff;   
}

header #menu .toggle-topbar.menu-icon a span::after {
    box-shadow: 0 0 0 1px #064780, 0 7px 0 1px #064780, 0 14px 0 1px #064780;
}

header #menu .title-area {
    top: 1.25rem; 
}

header #menu .title-area img {
    width: 250px;
}

header #menu .top-bar-section {
    top: 2.65rem;   
}

header #menu .right a {
    background: #fff;
    color: #064780;
    margin-bottom: 0;   
    text-transform: uppercase;
    font-size: 1rem;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    border: none;
}

header #menu .right .parent-link {
    display: none;
}

header #menu .right a:hover {
    background: #064780;
    color: #fff;
}

header #menu .right .has-dropdown > a::after {
    border-color: rgba(131, 169, 227, 1) transparent transparent;   
}

/* header #menu .right .active {color: #0854c7;} */

#tagline.front {
    padding-top: 6rem;
    text-align: center;
    margin-top: 1.5rem;
}

#tagline h2 {
    color: #fff; 
    margin: 0;
    text-shadow: 2px 2px 5px #1b1b1b;
}

#tagline .alert-box {
    margin-bottom: 0;
    background: #E5F7FF;
    border: none;
    color: #333;
    text-align: left;
}

#tagline .alert-box.warning {
    background: #f80;  
    text-align: center;
}

#content-header.front {
    margin-top: 5rem;   
    margin-bottom: 1rem;
}

#number h4 {
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
    margin: 0;
    padding-top: 0.1rem;
}

#page-title h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    text-shadow: 2px 2px 5px #1b1b1b;
}

#content {
    background: #fff;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}

#content img.services-thumbs {
    display: block;
    margin: 0 auto;
    padding-bottom: 1rem;
}

#content img.right {
    float: right;
    padding-left: 2rem;
}

#content img.left {
    float: left;
    padding-right: 2rem;
}

#affiliates {
    background: #e5f7ff;  
    padding-bottom: 30px;
    padding-top: 30px;
}

#affiliates img {
    margin: 0 0.5rem 0.5rem 0;   
}

#content .accordion {
    margin: 0;   
}

#content .accordion .accordion-navigation a {
    background: #E5F7FF;
}

#content .accordion .accordion-navigation h5 {
    margin: 0;
}

#content .accordion ul {
    margin-bottom: 1.25rem;   
}

.clearing-caption {
    padding: 10px 30px;
    font-size: 1rem;
}

footer {
    background: #064780;
    color: #fff;
    padding-bottom: 30px;
    padding-top: 30px;
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
    header #menu {top: 1.1rem; min-height: 6rem;}
    header #menu .title-area {top: 0.75rem;}
    header #menu .title-area img {width: 200px;}
    header #menu .top-bar-section {top: 1.65rem;}
    #tagline.front {padding-top: 4rem;}
    #content-header.front {margin-top: 3rem;}
    header.content {height: 9rem;}
}

@media only screen and (max-width: 40em) { 
    .bg-slideshow {top: 5rem;}
    header #menu {top: 0; min-height: 5.25rem;}
    header #menu .title-area {top: 1rem; height: 3.25rem;}    
    header #menu .title-area img {width: 145px;}
    header #menu .top-bar-section {top: 2rem;}
    header #menu.top-bar.expanded {height: 20.5rem;}
    #tagline.front {padding-top: 0;}
    #tagline h2 {display: none;}
    #number h4 {font-size: 1rem;}
    #tagline .alert-box {margin-bottom: 1rem;}
    #content-header.front {margin-top: 10rem; margin-bottom: 0;}
    header.content {height: 5rem;}
}