/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............
 * FONT-FACE...........
 * GLOBAL..............
 * HEADER..............
 * NAVIGATION..........
 * CONTENT.............
 * SIDEBAR.............
 * FOOTER..............
 * RESPONSIVE..........
 */

/* Colours 
# Dark Grey (text):#333333
# Mid Blue (side buttons): #114c79
# Dark Blue () #0e334b
# Rust () #ac3b07
# Dark Grey (footer) #57595b
# */





/*------------------------------------*\
    $FONT-FACE
\*------------------------------------*/




/*------------------------------------*\
    $GLOBAL
\*------------------------------------*/

body {
    background: #EFEFEF;
    background: url(../../assets/img/bg-body2.jpg) repeat;
    color: #4f4f4f;
    /*font-family: Arial,Verdana,sans-serif;*/
    font-family: 'Open Sans', sans-serif;
    /*font-size: 16px;*/
}

h1      { font-size: 2em;       /* 2*16 = 32 */         }
h2      { font-size: 1.5em;     /* 1.5*16 = 24 */       }
h3      { font-size: 1.17em;    /* 1.17*16 = 18.72 */   }
h3      { font-size: 1.1em;    /* 1.17*16 = 18.72 */   }
h4      { font-size: 1em;       /* 1*16 = 16 */         }
h5      { font-size: 0.83em;    /* 0.83*16 = 13.28 */   }
h6      { font-size: 0.75em;    /* 0.75*16 = 12 */      }

h1, h2, h3, h4 {
    font-family: 'Hind', sans-serif;
    font-weight: bold;
    /*     font-weight: 500; */
}

a, a:visited {
    color: #F89828;
    font-weight: bold;
}




/*------------------------------------*\
    $HEADER
\*------------------------------------*/

#header  {
    margin-bottom: 25px;
    background: #FFF;
}

#header .container {
    background: #FFF;
    border-radius: 0 0 20px 20px;
    position: relative;
}

.logo {
    width: 110px;
    padding: 10px 15px 15px 0;
}
.logo a {
    display: block;
}

.strapline {
    float: right;
    margin-top: -70px;
    width: 60%;

}

.strapline {
    float: right;
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: bold;
    color: #919194;
    color: #8EB2C2;
}

.nav-search-box {
    float: right;
    left: 18px;
    position: absolute;
    top: 8px;
    max-width: 210px;
}

.switcher {
    position: absolute;
    top: -4px;
    right: 0;
}

.switcher .btn-default {
    background-color: #fff;
    border-color: #efefef;
    color: #8eb2c2;
}

.switcher .btn-default:hover, .switcher .btn-default:focus, .switcher .btn-default:active, .switcher .btn-default.active, .switcher .open > .dropdown-toggle.btn-default {
    background-color: #FFF;
    border-color: #efefef;
    color: #8eb2c2;
}
.switcher .btn:active, .switcher .btn.active {
    background: #0077ab;
    color: #FAFAFA;
    box-shadow: 0;
    outline: 0 none;
}

.switcher .btn:active, .switcher .btn.active {
    background: #8eb2c2;
    color: #FAFAFA;
    box-shadow: 0;
    outline: 0 none;
    border-color: #8eb2c2;
}

.switcher button.outside {
    border-radius: 0;
}

@media (max-width: 359px) {

    .logo {
        width: 100px;
    }

    .strapline {
        font-size: 1em;
        margin-top: -60px;

    }

    .switcher a.btn {
        padding: 6px;
    }

}

/*------------------------------------*\
    $NAVIGATION
\*------------------------------------*/

.navbar {
    margin-bottom: 0;
    background: #818286;
    margin-right: -15px;
    margin-left: -15px;
}

.navbar-toggle {
    margin-top: 0;
    padding: 14px 10px 4px;
}

.navbar-toggle .icon-bar {
    background: #fafafa none repeat scroll 0 0;
    border-radius: 1px;
    display: block;
    height: 4px;
    width: 30px;
}

.nav-search-box .btn-default {
    background-color: #818286;
    border-color: #818286;
    color: #FAFAFA;
}

.nav-search-box imput.form-control {
    border-radius: 4px;
}

.nav-search-box .input-group .form-control:first-child, .nav-search-box .input-group-addon:first-child, .nav-search-box .input-group-btn:first-child > .btn, .nav-search-box .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .nav-search-box .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .nav-search-box .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}




/*------------------------------------*\
    $CONTENT
\*------------------------------------*/

/* Homepage Content 
------------------- */

#slider {
    margin-bottom: 15px;
}
#delta-slider {
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 0 10px;
}

#delta-slider img {
    -webkit-box-shadow: 0px 1px 5px 0px rgba(42, 42, 42, 0.25);;
    -moz-box-shadow:    0px 1px 5px 0px rgba(42, 42, 42, 0.25);;
    box-shadow:         0px 1px 5px 0px rgba(42, 42, 42, 0.25);;
}

.carousel-caption {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding-top: 0;
    padding-bottom: 0;
    color: #000;
    text-align: left;
    text-shadow: none;
    margin-top: 10px; 
    min-height: 80px;
}

/* Home featured */

#feature-container {
    margin-bottom: 15px;
    padding-bottom: 30px;
}

.feature-box {
    background: #FFF;
    border-radius: 20px 0 20px 20px;
    margin-bottom: 25px;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(42, 42, 42, 0.25);;
    -moz-box-shadow:    0px 1px 5px 0px rgba(42, 42, 42, 0.25);;
    box-shadow:         0px 1px 5px 0px rgba(42, 42, 42, 0.25);;
}

.feature-box .image img {
    border-radius: 20px 0 0 0;
}

.feature-box .text {
    padding: 15px;
}

.feature-box .text h3 {
    margin-top: 10px;
}

/* Upcoming Events */

.feature-box .text ul li a i.fa {
    padding-right: 5px;
}

.feature-box .text ul li a {
    display: inline-flex;
}

.feature-box .text ul li span.date {
    font-style: italic;
    color: #CCC;
    display: inline-block;
}

.feature-box .text ul li {
    padding-left: 22px;
    position: relative;
}

.feature-box .text ul li:before {
    position: absolute;
    font-family: 'FontAwesome';
    top: 0;
    left: 0;
    content: "\f1b0";
}





/* Page Content
--------------- */
#page {
    background: #FFF;
}
.main {
    background: #FFF;
    margin-bottom: 50px;
    overflow: hidden;
}

.main img {
        max-width: 100%;
        height: auto;
    }


/* Find a dog trainer */

#searcharea select {
    width: 100%;
    margin-top: 10px;
}

.trainer-result {
    border-bottom: #CCC solid 1px;
    padding-bottom: 15px;
    overflow: hidden;
}

.trainer-result .image {
    margin-bottom: 15px;

}

/*    .trainer-result .image img.trainer-img {
        margin: 0 auto;
    }*/

.trainer-result .image .blank-image {
    width: 137px;
    /*margin: 0 auto;*/
}

#searcharea input[type="checkbox"] {
    margin-bottom: 10px;
}



/*------------------------------------*\
    $SIDEBAR
\*------------------------------------*/

/* Hompage Sidebar
------------------ */
.btn-hm-delta {
    background: #0077ab;
    margin-bottom: 10px;
    width: 100%;
    color: #FAFAFA !important;
}

.hm-fb {
    -webkit-box-shadow: 0px 1px 5px 0px rgba(42, 42, 42, 0.25);
    -moz-box-shadow:    0px 1px 5px 0px rgba(42, 42, 42, 0.25);
    box-shadow:         0px 1px 5px 0px rgba(42, 42, 42, 0.25);
    max-width: 340px;
}

.hm-fb .top {
    /*background: #2E3539;*/
    border-radius: 20px 0 0 0;
    height: 20px;
    max-width: 340px;
}

.hm-fb .top img {
    border-radius: 20px 0 0 0;
}

.fb-bottom {
    height: 40px;
    background: #FFF;
    border-radius: 0 0 20px 20px;
    max-width: 340px;
}

.phone-btns {
    margin-top: 20px;
}


/* Page Sidebar 
-------------------------- */
/* Side nav */





/*------------------------------------*\
    $FOOTER
\*------------------------------------*/




/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 180px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 180px;
    background-color: #FFF;
}

.sub-footer {
    background-color: #818286;
    color: #fafafa;
}

.sub-footer .container div {
    padding: 0;
}


.sub-footer a {
    color: #fafafa;
}

.sub-footer a.footer-fb {
    display: inline-block;
    margin-top: 1px;
}

.copyright {
    margin: 20px 0;
}

.sub-footer a i.fa {
    font-size: 1.5em;
}


p.links {
    padding-bottom: 5px;
}



/*------------------------------------*\
    $RESPONSIVE
\*------------------------------------*/



/* Members and Students side nav */

@media (max-width:768px) {

    .sidenav-header {
        background: #0077ab;
        border-radius: 6px;
    }

    .sidenav-toggle {
        border: 0;
        margin-bottom: 0;
    }

    .navbar-default .navbar-brand {
        color: #FFF;
    }

    .navbar-default .sidenav-toggle:hover, .navbar-default .sidenav-toggle:focus {
        background: none;
    }

    .navbar-default .sidenav-toggle .icon-bar {
        background-color: #FFF;
        height: 5px;
        width: 25px;
        height: 4px;
        width: 20px;
    }

    a.side-navbar-brand {
        text-decoration: underline;
    }

    #subnav3 li a, #subnav2 li a {
        display: block;
        border-bottom: 1px solid #FFF;
        padding: 15px;
        color: #FFF;
        background: #0077ab;

    }

    #subnav3 li:last-child, #subnav2 li:last-child {
        border-bottom: none;
    }

    #subnav3 li a.last, #subnav2 li a.last {
        border-bottom: 0;
        border-radius: 0 0 6px 6px;
    }
    
    #subnav4 li a, #subnav2 li a {
        display: block;
        border-bottom: 1px solid #FFF;
        padding: 15px;
        color: #FFF;
        background: #0077ab;

    }

    #subnav4 li:last-child, #subnav2 li:last-child {
        border-bottom: none;
    }

    #subnav4 li a.last, #subnav2 li a.last {
        border-bottom: 0;
        border-radius: 0 0 6px 6px;
    }
    
    #subnav5 li a, #subnav2 li a {
        display: block;
        border-bottom: 1px solid #FFF;
        padding: 15px;
        color: #FFF;
        background: #0077ab;

    }

    #subnav5 li:last-child, #subnav2 li:last-child {
        border-bottom: none;
    }

    #subnav5 li a.last, #subnav2 li a.last {
        border-bottom: 0;
        border-radius: 0 0 6px 6px;
    }

    .side-nav li {
        margin-bottom: 0;
    }

    .membersnav {
        background: none;
        margin-right: 0;
        margin-left: 0;
        border-radius: 4px;
        border-color:transparent;
        margin-bottom: 15px;
    }

    .membersnav .container-fluid {
        border: none;

    }

    #members-sidenav-collapse, #students-sidenav-collapse, #students2016-sidenav-collapse{
        border-right: none;
        border-left: none;
        padding-right: 0;
        padding-left: 0;

    }

}



@media (min-width: 768px) {

    .container {
        width: 750px;
    }



    /* Header
      ========================================================================== */

    .logo {
        margin-bottom: 20px;
        padding: 10px 15px 15px 0;
        width: 170px;
    }

    .navbar-header {
        float: none;
    }

    .nav-search-box {
        float: right;
        margin-right: 20px;
        margin-top: -85px;
        position: relative;
    }

    .nav-search-box .input-group .form-control:first-child, .nav-search-box .input-group-addon:first-child, .nav-search-box .input-group-btn:first-child > .btn, .nav-search-box .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .nav-search-box .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .nav-search-box .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    .strapline {
        float: right;
        margin-top: -160px;
        font-size: 1.3em;
        text-transform: uppercase;
        font-weight: bold;
        color: #919194;
        color: #8EB2C2;
        text-align: right;
        width: 50%;
    }

    .switcher {
        position: absolute;
        right: 13px;
        top: -5px;
    }

    .switcher .btn:active, .switcher .btn.active {
        background: #8eb2c2;
        color: #FAFAFA;
        box-shadow: 0;
        outline: 0 none;
        border-color: #8eb2c2;
    }

    /* Navigation
       ========================================================================== */

    .navbar {
        margin-bottom: 5px;
        margin-right: 0;
        margin-left: 0;
        background: none;
    }

    .navbar-collapse {
        background: #818286;
        border-radius: 10px 0 10px 10px;
    }

    .navbar-nav > li > a {
        color: #FFF;
        font-size: 1.1em;
        padding-bottom: 10px;
        padding-top: 10px;
        border-right: #919194 solid 1px;
        padding-right: 8px;
        padding-left: 8px;
    }
    .navbar-nav > li > a.last {
        border-right: none;
    }

    .nav > li > a:hover, .nav > li > a.first:focus {
        border-radius: 10px 0 0 10px;

    }

    .nav > li > a:hover, .nav > li > a:focus {
        background-color: #818286;
        text-decoration: none;
        color: #FAFAFA;
    }

    .dropdown-menu > li {
        border-bottom: #efefef solid 1px;
    }

    .dropdown-menu > li:last-child {
        border-bottom: none;
    }

    .dropdown-menu > li > a {
        color: #4f4f4f;
        padding: 10px 20px;
    }

    .nav.search-box .btn-default {
        background-color: #fff;
        border-color: #ccc;
        color: #333;
    }


    /* Content
       ========================================================================== */

    /* Homepage Content 
    ------------------- */

    /* Carousel */

    #delta-slider {
        padding: 0 0 10px 0;
        margin-bottom: 15px;
    }

    .carousel-caption {
        margin-top: -90px;
        height: 90px;
        background: #525252;
        background: rgba(0, 0, 0, 0.5);
        color: #FAFAFA;
        padding: 10px 15px;
        text-align: left;
    }

    .carousel-caption p {
        font-size: 1.4em;
        font-weight: bold;
    }

    .carousel-arrows {
        margin-top: -230px;
    }

    .carousel-control .fa-angle-left, .carousel-control .fa-angle-right {
        display: inline-block;
        font-size: 3em;
        position: absolute;
        top: 40%;
        z-index: 5;
    }

    .carousel-control.left {
        left: -20px;
    }

    .carousel-control.right, .carousel-control.left {
        background-image: none;
        background-repeat: no-repeat;
    }

    .carousel-indicators {
        bottom: 0;
    }


    /* Page Content
    --------------- */

    #page {
        background: none;
    }

    #page .container {
        padding-bottom: 50px;
    }

    .main {
        background: #FFF;
        padding: 25px;
        border-radius: 20px 0 20px 20px;
        padding-bottom: 50px;
         overflow: hidden;
    }
    
    .main img {
        max-width: 100%;
        height: auto;
    }

    /* Find a trainer */

    #searcharea select {
        width: 190px;
        margin-top: 0;
    }

    #searcharea input[type="checkbox"] {
        margin-bottom: 0;
    }




    /* Sidebar
       ========================================================================== */

    /* Hompage Sidebar
    ------------------ */

    .btn-hm-delta {
        width: 100%;
    }

    .dt-btn-hm-delta {
        margin-bottom: 15px;

    }
    .dt-btn-hm-delta img {
        border-radius: 20px 0 20px 20px;
        -webkit-box-shadow: 0px 1px 5px 0px rgba(42, 42, 42, 0.25);;
        -moz-box-shadow:    0px 1px 5px 0px rgba(42, 42, 42, 0.25);;
        box-shadow:         0px 1px 5px 0px rgba(42, 42, 42, 0.25);;
    }

    .dt-btn-hm-delta p {
        margin-top: -30px;
        font-size: 1.3em;
        font-weight: bold;
        text-align: center;
        /*background: rgba(0, 0, 0, 0.5);*/
    }

    .dt-btn-hm-delta p a {
        color: #FAFAFA;
        display: block;
    }

    .dt-btn-hm-delta p a:hover, .dt-btn-hm-delta p a:focus {
        text-decoration: none;
    }

    .feature-box {
        min-height: 340px;
    }

    .hm-fb {
        background: #fff none repeat scroll 0 0;
        height: 310px;
        max-width: 340px;
        overflow: hidden;
        padding-bottom: 40px;
        border-radius: 20px 0 0 0;
    }

    .fb-bottom {
        height: 40px;
        background: #FFF;
        border-radius: 0 0 20px 20px;
    }

    /* Page Sidebar 
    -------------------------- */
    /* Side nav */

    .side-nav {
        background: #FFF;
        border-radius: 20px 0 20px 20px;
        margin-bottom: 20px;
        box-shadow: 0 1px 5px 0 rgba(42, 42, 42, 0.25);
    }

    ul#subnav {
        padding: 1em;
        margin-left: 10px;
    }

    ul#subnav li {
        margin-bottom: 10px;
        position: relative;
    }

    ul#subnav li a {
        color: #f89828;
        display: inline-block;
        /*font-size: 0.85em;*/
        line-height: 1.5;
        /*text-transform: uppercase;*/
        font-weight: bold;
    }

    ul#subnav li a.on::before {
        color: #818286;
        content: "\f1b0";
        font-family: "FontAwesome";
        font-size: 1.2em;
        font-weight: normal;
        left: 0;
        top: -3px;
        position: absolute;
    }

    ul#subnav li a.on {
        padding-left: 30px;
        color: #818286;
    }

    .navlink
    {
        list-style: none;
    }

    
    /* Footer
       ========================================================================== */


    body {
        /* Margin bottom by footer height */
        margin-bottom: 217px;
    }
    .footer {
        bottom: 0;
        /* Set the fixed height of the footer here */
        height: 217px;
        /*     background-color: #818286; */
    }


    .sub-footer-links {
        text-align: right;
    }





}


@media (min-width: 992px) {

    .container {
        width: 970px;
    }

    /* Header
    ========================================================================== */

    #header .container {
        position: relative;
    }

    .logo {
        margin-bottom: 10px;
    }

    .strapline {
        position: absolute;
        right: 315px;
        top: 60px;
        margin-top: 0;
        font-size: 1.5em;
        color: #8eb2c2;
    }



    /* Navigation
       ========================================================================== */

    .nav-search-box {
        margin-top: -70px;
        margin-right: 30px;
    }

    .nav-search-box .btn-default {
        height: 33px;
    }

    .navbar {
        position: absolute;
        top: 128px;
        right: 10px;
        margin-right: -10px;
        margin-left: -10px;
    }

    .navbar-collapse {
        background: none;
        border-radius: 0;
    }

    .navbar-nav > li > a {
        color: #F89828;
        font-size: 1.3em;
        border-right: #F89828 solid 2px;
        font-weight: bold;
        padding: 0 12px;
    }


    .navbar-nav > li > a.last {
        border-right: 0;
    }

    .nav > li > a:hover, .nav > li > a.first:focus {
        border-radius: 0;
        color: #818286;
        background: none;
    }

    .nav > li > a.on {
        border-radius: 0;
        color: #818286;
        background: none;
    }

    /* ***** */

    .logo {
        margin-bottom: 0;
        margin-top: 15px;
        width: 150px;
    }

    .navbar-nav {
        float: left;
        margin: 10px 0;
    }

    .navbar-nav > li > a {
        font-size: 1.2em;
    }


    /* Content
       ========================================================================== */

    /* Homepage Content 
    ------------------- */

    /* carousel */

    .carousel-inner img {
        border-radius: 20px 0 20px 20px;
    }

    .carousel-inner .carousel-caption {
        border-radius: 0 0 20px 20px;
    }

    #feature-container {
        padding-bottom: 15px;
    }

    .feature-box {
        min-height: 370px;
    }

    .feature-box .image {
        max-height: 113px;
        overflow: hidden;
    }

    /* Page Content
    --------------- */






    /* Sidebar
       ========================================================================== */

    /* Hompage Sidebar
    ------------------ */

    .hm-fb {
        background: #fff none repeat scroll 0 0;
        border-radius: 20px 0 20px 20px;
        margin-top: -145px;
        padding-bottom: 40px;
        /*padding-top: 20px;*/
        height: 515px;
    }

    .hm-fb .top {
        /*background: #2E3539;*/
        border-radius: 20px 0 0 0;
        height: 13px;
    }


    /* Page Sidebar 
    -------------------------- */
    /* Side nav */





    /* Footer
       ========================================================================== */

body {
        /* Margin bottom by footer height */
        margin-bottom: 205px;
    }
    .footer {
        bottom: 0;
        /* Set the fixed height of the footer here */
        height: 205px;
        /*     background-color: #818286; */
    }





}


@media (min-width: 1200px) {

    .container {
        width: 970px;
    }

    .container {
        width: 1170px;
    }

    /* Header
    ========================================================================== */

    .nav-search-box {
        margin-right: -100px;
    }

    .strapline {
        right: 400px;
    }

    /* Navigation
       ========================================================================== */
    .navbar {
        right: 140px;
    }


    /* Content
       ========================================================================== */

    /* Homepage Content 
    ------------------- */

    .carousel-arrows {
        margin-top: -270px;
    }

    .feature-box {
        min-height: 358px;
    }

    .feature-box .image {
        max-height: 141px;
        overflow: hidden;
        border-radius: 20px 0 0;
    }

    /* Page Content
    --------------- */






    /* Sidebar
       ========================================================================== */

    /* Hompage Sidebar
    ------------------ */



    .hm-fb {
        margin-top: -170px;
        height: 527px;
    }



    /* Page Sidebar 
    -------------------------- */
    /* Side nav */





    /* Footer
       ========================================================================== */







}


@media screen and (min-width:0\0) { 

    /* IE9+ CSS here */
    .left.carousel-control {
        left: 40px !important;
    }

    .right.carousel-control {
        right: -60px !important;
    }
}