/* #Media Queries
================================================== */

/*CSS for serving the retina image to devices with a high "device-pixel-ratio":*/
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
}

/* Smaller than standard 1023 (devices and browsers) */
@media only screen and (max-width: 1023px) {
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

    .hidden-desktop {display: block;}
    .hidden-tablet {display: none;}

    body {
        background-size: 65% auto;
    }
    /* Widgets */
    .widget_form_row label {
        width: 100%;
        display: block;
    }

    .widget_form_input {
        width: 100%;
    }

    /* Header */

    #headerContainer, #header, #mainNav {
        width: 768px!important;
    }
    #header {
        background-size: 100% auto;
        height: 177px;
    }
    .logo{
        width: 291px;
        height: auto;
        margin: 59px 0 0 9px;
    }
    #mainNav {
        background-size: 100% auto!important;
        height: 49px;
        margin-left: 0;
    }


    #mainNav li a{
        font-size: 14px;
        padding: 13px 13px;
    }


    /* Home Page */
    .homeStyles #container, #container {
        width: 768px;
    }
    #home {
        float: left;
        width: 768px;
    }
    #homeBannerContainer {
        width: 515px!important;
        height: 180px!important;
    }
    #homeBannerContainer img{
        width: 100%;
    }
    .bannerLinks {
        width: 195px;
    }
    .bannerLinks img{
        width: 100%;
        height: auto;
    }

    .hairExtensions {
        margin-right: 4%
    }
    .hairExtensions, .otherTreatments {
        width: 48%;
        background-position: right top;
        margin-top: 20px;
    }

    .homeStyles #bottomCorners {
        width: 768px;
        background-position: right bottom;
    }

    /* Footer */
    .homeStyles #footer, #footer {
        width: 768px;
        background-position: left top;
        background-size: 100% auto;
    }
    #footer {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        background: none;
    }
    #footer img {
        float: left;
        margin: 0 0 0 10%;
    }

    /* General Layout styles for the rest of the site*/
    #container  {
        -webkit-border-bottom-right-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        border-bottom-right-radius: 10px;
    }
    #content {
        width: 538px;
        padding: 10px 15px 0 15px;
        min-height: 416px;
        margin-bottom: 0;
        -webkit-border-bottom-right-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        border-bottom-right-radius: 10px;
    }
    #content img{
        width: 100%;
        height: auto;
    }
    #content img.pageImg {
        width: inherit;
    }
    .image_tab_mob {
        width: 100%;
        height: auto;
    }
    #content .text {
        margin-right: 0;
    }

    /* Sidebar */
    #sidebar {
        width: 200px;

    }
    #subNav { padding-top: 15px;}

    .shoppingCart {
        width: 100%;
        height: 62px;
        background-size: 100% auto;
        margin-top: -1px;
    }
    .shoppingCart span {
        margin: 25px 0 0 64px;
    }
    .shoppingCart img.viewProductsLink {
        margin: -1px 5px 0 0;
    }

    /* Colour Section */
    #content .colourSelection img{
        width: 200px;
    }
    .colourSelection {
        width: 100%;
    }

    /* Gallery */
    #content #slideshow img {
        width: inherit;
        max-width: 100%;
    }
    #content ul.thumbs {
        margin-bottom: 10px!important;
        height: auto!important;
    }

    #content #galleryCatList li.first {
        margin: 0 0 12px 0%;
    }
    #content #galleryCatList li.clear {
        height: 0!important;
    }
    #content #galleryCatList li {
        width: 32%;
        margin: 0 0 12px 1%!important;
    }
    /* Products */

    #content .categoriesContainer {
        width: 31%;
        margin: 0 2% 15px 0;
    }

    #content .categoriesContainer img, #content .productThumb img, #productImgContainer a img, #galleryCatList a img {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }
    #content .tablet_form {
        float: left;
    }
    #content #productImgContainer {
        width: 40%;
    }
    #content .productsContainer img{
        margin-bottom: 10px;
    }
    #content .productThumb {
        width: 30%;
     }
    #content .productSummary {
        width: 65%;
        margin-bottom: 0px;
    }


    /* Check out */
    #content .checkoutItems {
        width: 100%;
    }
    #content #checkout img{
        width: inherit;
    }
    #content .checkoutItems img.checkoutThumb{
        width: 35%;
        float: left;
    }
    .checkoutItems div {
        width: 60%;
    }
    #content img.req  {
        width: inherit!important;
        height: auto;
    }


    /* Contact us page */
    #content .requiredFields img, #content #captcha {
        width: inherit;
    }
    .onlineEnquiryTable {
        width: 100%;
    }
    .onlineEnquiryTable input.textinput, .onlineEnquiryTable input.textinputhover, .onlineEnquiryTable textarea {
        width: 100%;
    }

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    .hidden-phone {display: none;}
    .hidden-desktop {display: block;}
    .hidden-landscape {display: none;}
    .visible-phone {
        display: block!important;
    }

    html, body {
        font-size: 14px;
        line-height: 20px;
        background-image: none;
    }

    .mob_full_width {
        width: 100%;
    }



    /* Header */

    #headerContainer, #header, #mainNav {
        width: 90%!important;
        min-width: 290px;
    }
    #headerContainer {
        margin-top: 0;
    }
    #header {
        background: none;
        height: 88px;
    }
    .logo {
        width: 200px;
        height: auto;
        margin: 13px 0 6px 9px;
    }
    #mainNav {
        display: none;
    }
    /* Navgiation */

    #navigation select {
        -webkit-appearance: none;
        height: 0 !important;
        line-height: 21px;
        position: absolute;
        top: 20px;
        right: 29px;
        float: right;
        width: 0 !important;
        height: 37px;
        color: #FFF;
        font-size: 13px;
        font-weight: bold;
        padding: 16px 21px;
        border-radius: 4px;
        border: 1px solid #ccc;
        background: #000 url(/images/icons/nav.png) center center;
    }

    /* Home Page */
    .homeStyles #container, #container {
        width: 100%;
        min-width: 290px;
    }
    #home .background img{
        width: 100%;
    }
    #home {
        width: 100%;
    }
    #homeBannerContainer {
        width: 100%!important;
        height: 218px!important;
        margin-top: 15px;
    }
    #homeBannerContainer img{
        width: 100%;
    }
    .bannerLinks {
        width: 100%;
    }
    .bannerLinks a{
        width: 48%;
        margin-top: 20px;
        margin-right: 4%;
        float: left;
    }
    .bannerLinks a.link2{
        width: 48%;
        margin-right: 0%;
        float: left;
    }
    .bannerLinks img{
        width: 100%;
        height: auto;
    }

    .hairExtensions {
        margin-right: 4%
    }
    .hairExtensions, .otherTreatments {
        width: 48%;
        background-position: right bottom;
        margin-top: 20px;
        height: 185px;
        background-color: #F0657A;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }
    .homeStyles #bottomCorners {
        display: none;
    }
    #homePage #menu_mobile {
        display : none;
    }



    #home ul li.heading {
        width: 100%;
    }
    #home ul {
        list-style: none;
        margin-left: 2%;
        width: 60%;
    }
    .call_to_action {
        padding: 10px;
        text-align: center;
        background: #2F2F2F;
    }
    .call_to_action i {
        margin-right: 8px;
        font-size: 24px;
        line-height: 34px;
    }
    .call_to_action a{
        color: #fff;
    }
    .call_to_action a span {
        font-size: 24px;
        padding-top: 4px;
        line-height: 34px;
        display: inline-block;
    }
    .call_to_action a:hover{
        color: #fff;
        text-decoration: none;
    }



    /* Footer */
    .homeStyles #footer, #footer {
        width: 90%;
        background-position: left top;
        background-size: 100% auto;
    }
    #footer {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        background: none;
        text-align: center;
    }
    #footer img {
        float: none;
        margin: 0 0 0 0;
    }
    #footer ul {
        text-align: center;
        margin: 10px 0 0 0;
        width: 100%;
        float: left;
    }
    #footer p {
        width: 100%;
        text-align: center;
        float: left;
        margin-bottom: 10px;
    }

    /*sidebar */
    #sidebar {
        display: none;
    }

    /*container */
    #container {
        background-image: none;
        background-color: #1A1A1A;
    }

    /* Images */
    #content img{
        width: 100%;
        height: auto;
    }
    #content img.pageImg {
        width: inherit;
    }
    .image_tab_mob {
        width: 100%;
        height: auto;
    }
    #content .requiredFields img, #content #captcha {
        width: inherit;
    }

    /* Other styles & content */
    #content {
        float: none;
        margin: 0 auto;
        width: 90%!important;
        min-width: 286px;
        padding: 10px 2%;
    }
    #content .text {
        margin-right: 0;
    }

    /* Colour section */

    #content .colourSelection {
        width: 100%;
    }
    #content .colourSelection img {
        width: 50%;
        margin-right: 4%;
    }
    .colourSelection h2 img {
        margin: 0 0 10px 0;
    }

    /*Products */
    #content .productThumb {
        width: 30%;
    }
    #content .productSummary {
        width: 65%;
        margin-bottom: 0px;
    }

    #content #productImgContainer {
        float: left;
        width: 44%;
        text-align: center;
        margin: 0 20px 15px 0;
    }
    #content .categoriesContainer {
        width: 48%;
        margin: 0 4% 25px 0;
    }
    #content .categoriesContainer.mobright{
        margin-right: 0;
    }

    /* Check out */
    #content .checkoutItems {
        width: 100%;
    }
    #content #checkout img{
        width: inherit;
    }
    #content .checkoutItems img.checkoutThumb{
        width: 28%;
        float: left;
    }
    .checkoutItems div {
        width: 65%;
    }
    #content img.req  {
        width: inherit!important;
        height: auto;
    }


    /* Gallery */
    #slideshow {
        max-width: 400px;
        margin: 0 auto;
    }
    #content #galleryCatList li {
        width: 48%;
        margin-left: 0!important;
    }
    #content #galleryCatList li.mob_last {
       margin-left: 4%!important;
    }
    #content ul.thumbs {
        height: auto!important;
    }
    /* Contact Forms */
    .onlineEnquiryTable input.textinput, .onlineEnquiryTable input.textinputhover, .onlineEnquiryTable textarea {
        width: 100%;
    }
}

@media only screen and (max-width: 586px) {
    #homeBannerContainer {
        height: 162px!important;
    }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {


}


/* Just for anything extra between mobile portrait and landscape (devices and browsers) */
@media only screen and (max-width: 600px) {
    .hairExtensions, .otherTreatments {
        width: 100%;
        height: auto;
        background-position: left top;
        margin-top: 20px;
        background: #f0657a; /* Old browsers */
        background: -moz-linear-gradient(top,  #f0657a 0%, #853f49 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0657a), color-stop(100%,#853f49)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #f0657a 0%,#853f49 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #f0657a 0%,#853f49 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #f0657a 0%,#853f49 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #f0657a 0%,#853f49 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0657a', endColorstr='#853f49',GradientType=0 ); /* IE6-9 */
        padding-bottom: 15px;
    }
    #home ul {
        width: 90%;
    }

    .hairExtensions {
        margin-right: 0%;
    }

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

    .hidden-landscape {display: block;}

    #header {
        height: 81px;
    }

    /* Home Page */
    .logo {
        width: 173px;
    }
    #homeBannerContainer {
        height: 108px!important;
    }
    #home #homeBannerContainer.fadebanner a.noLink {
        width: 100%!important;
    }
    #home ul {
        list-style: none;
        margin-left: 6%;
        width: 85%;
    }
    .bannerLinks a, .bannerLinks a.link2 {
        width: 100%;
        margin-top: 19px;
        margin-right: 0%;
        float: left;
    }
    .call_to_action i {
        margin-right: 8px;
        font-size: 19px;
        line-height: 34px;
    }
    .call_to_action a{
        color: #fff;
    }
    .call_to_action a span {
        font-size: 20px;
        padding-top: 4px;
        line-height: 34px;
        display: inline-block;
    }

    /* Colour section */
    #content .colourSelection {
        width: 100%;
        float: none;
    }
    #content .colourSelection img {
        width: 100%;
        margin-right: 0%;
    }
    .colourSelection h2 img {
        margin-bottom: 10px;
    }
    /* Products */
    #content .categoriesContainer {
        width: 100%;
        margin: 0 0px 25px 0;
    }

    #content #productImgContainer {
        float: left;
        width: 100%;
        text-align: center;
        margin: 0 0 10px;
    }
    #content #productImgContainer a {
        display: block;
        width: 48%;
        float: left;
        margin-right: 4%;
    }
    #content #productImgContainer a.mob_last {
        margin-right: 0;
    }
    #content .productsContainer a {
        width: 100%;
    }
    #content .productsContainer img{
        width: 100%;
    }
    #content .productSummary {
        width: 100%;
        margin-bottom: 0;
    }

    /* ---- adding box sizing to a bunch of images with borders */
    .categoriesContainer a img, #content .colourSelection h2 img, #galleryCatList a img, .productsContainer a img, #content .checkoutItems img.checkoutThumb {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }


    /* Check out */
    #content .checkoutItems {
        width: 100%;
    }
    #content #checkout img{
        width: inherit;
    }
    #content .checkoutItems img.checkoutThumb{
        width: 100%;
        float: left;
    }
    .checkoutItems div {
        width: 100%;
    }
    .checkoutItems a {
        float: left;
    }
    .checkoutThumb {
        display: none;
    }


    /* Gallery */

    #content #galleryCatList li {
        width: 100%;
        margin: 0 0 12px 0!important;
    }

    #content ul.thumbs li {
        width: 46%;
    }
    #content #galleryCatList li.mob_last {
        margin-left: 0%!important;
    }


}

@media only screen and (max-width: 380px) {
    #homeBannerContainer {
        height: 77px!important;
    }
}