/* default styles (all screens) */
@media only screen {

    body {
        background: #000;
        font-family: Roboto;
        margin: 0;
    }
    area{
        display: block;
        cursor: pointer;
    }
    .hdr-logo {
        padding: 1.1em 0 1.4em 0;
    }
    .ftr-logo-kw {
        padding: 1.75em 0 1.4em 0.5em;
        max-width: 320px;
        display: none;
    }
    .main-menu-kw {
        display: none !important;
    }
    .hdr-logo-text {
        margin: 0; color: #F2D399; text-transform: uppercase; padding: 2.9em 0 0 1em; font-size: 0.8em; line-height: normal;
    }
    .fb-hdr-badge {
        display: none;
    }
    .home-slick {
        display: none;
    }

        .home-slick.slick-slider {
            margin-bottom: 0;
        }

    .collections-slick {
        padding: 2em 0;
    }

        .collections-slick > div {
            text-align: center;
            padding: 0;
        }

            .collections-slick > div img {
                margin: auto;
            }

            .collections-slick > div p {
                margin-top: 1em;
            }

        .collections-slick .slick-dots {
            padding-bottom: 2em;
        }

            .brands-slick {
        margin-top: 2em;
        border-top: 1px solid #e8e8e8;
                padding: 2em 0;
    }

        .brands-slick > div {
            text-align: center;
            padding: 0;
        }

            .brands-slick > div img {
                margin: auto;
            }

            .brands-slick > div p {
                margin-top: 1em;
            }

        .brands-slick .slick-dots {
            padding-bottom: 2em;
        }

    .product-description {
        background: #2A2A2A; 
        color: #fff; 
    }

    .product-description .product-title {
        margin: 0;
        color: #F2D399;
    }

    h1.title, h2.title {
        color: #7C704F;
        font-size: 1.4em;
        font-family: Roboto, sans-serif;
        padding: 0.8em 0;
        text-transform: uppercase;
    }


    h1.title.collections, h2.title.collections {
        padding: 0;
    }


    h4 {
        color: #7C704F;
    }

    h5 {
        font-size: 1.8em;
    }
    .alert-box.info {
        background: #D2EEF7;
        border: #D2EEF7;
        color: #000;
    }

    ul.collection-list li {
        text-align: center;
    }

        ul.collection-list li p {
            text-align: center;
            margin: 0.8em 0 2.8em 0;
        }

        ul.collection-list li img {
            width: 80%;
        }
        .sub-nav {
        overflow: auto;
        }
    .sub-nav dt, .sub-nav dd, .sub-nav li {

        float: none;
        display: inline-block;
    }

    .sub-nav dt a, .sub-nav dd a, .sub-nav li a {
        color: #000;
        border: 1px solid #666;
        background: #fff;
        border-radius: 3px;
        line-height: 1.25em;
    }

    .sub-nav dt.active a, .sub-nav dd.active a, .sub-nav li.active a {
        background: #333;
        color: #F2D399;
    }

    .button {
        background-color: #7C704F;
        border: none;
        color: #fff;
        padding: 0.4em 0.8em;
        text-transform: uppercase;
        font-family: Roboto;
    }

        .button:hover, .button:focus {
            background-color: #721860;
        }

    .wishlist-delete {
        font-size: 0.7em;
        margin-top: 0.8em;
    }

    .grey {
        background-color: #666;
    }

        .grey:hover, .grey:focus {
            background-color: #333;
        }

    .angled:after, .angled:before {
        content: "";
        position: absolute;
        top: 0;
        width: 0;
        height: 0;
    }

    .angled:after {
        right: 0;
        border-left: 15px solid #212121; /* razorblade color */
        border-bottom: 30px solid #000; /* page background color */
    }

    .angled:before {
        border-right: 15px solid #212121; /* razorblade color */
        border-top: 30px solid #000; /* page background color */
    }

    .wishlist {
        width: 171px;
        text-align: center;
    }
    .wishlist:before {
        right: 181px;
    }

    .trade-login:before {
        right: 123px;
    }

    .angled a, .trade-login a {
        color: rgba(255,255,255,0.8);
        text-transform: uppercase;
        font-size: 0.8em;
    }

    .angled a:hover {
        color: #F2D399;
    }

    .ftr-logo {
        width: 80%;
        padding: 1.1em 0 1.4em 0.5em;
    }

    .ftr-logo-text {
        margin: 0; color: #F2D399; text-transform: uppercase; padding: 2.4em 0 0 0; font-size: 0.8em; line-height: normal; display: none;
    }

    .ftr-nz, .ftr-au { 
        color: #999; font-size: 0.7em; padding-top: 1.1em; line-height: 140%;
    }

    .ftr-nz { padding-left: 0; }

    .ftr-au {
        padding-left: 3rem;
    }

        .ftr-copyright-text {
        color: #999; font-size: 0.7em; padding-top: 0.8em; line-height: 140%;
    }

    .enquiries-ftr {
        background: #F2D399; padding: 0.5rem; font-size: 0.8rem;
    }

    .enquiries-ftr a {
        color: #222;
    }

    .search-container {
        overflow: hidden;
        float: right;
        margin-right: 1.2em;
        height: 1.8em;
        padding: 0.25em 0;
        width: 1em;
        -moz-transition: all 0.35s;
        -webkit-transition: all 0.35s;
    }
    .search-container:hover {
        width: 11em;
    }
    .search-container:hover input {
        display: inline-block;
        width: 11em;
        padding: 0 0.5em;
    }

    .search-container input {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        float: left;
        border: none;
        width: 0;
        margin-right: -2em;
        background: #fff;
        color: #6A5D4F;
        font-size: 1em;
        padding: 0;
        font-size: 0.8em;
        -moz-transition: all 0.25s;
        -webkit-transition: all 0.25s;
        height: 1.8em;
    }
    .search-container input:focus {
        outline: none;
    }

    .search-button {
        float: right;
        font-size: 1em;
        color: #fff;
        width: 1em;
    }
    .search-button:hover {
        color: #fff;
    }

    .asp-grid input, .asp-grid .button {
        margin-bottom: 0;
    }

    .asp-grid th.hide-for-small-only, .asp-grid td.hide-for-small-only {
        display: none !important;
    }

    .asp-grid th.show-for-small-only, .asp-grid td.show-for-small-only {
        display: table-cell !important;
    }

    .login-panel {
        background: #f3f3f3;
        padding: 0 0.4em 0.4em 0.4em !important;
        margin-top: 1em;
    }

    .side-menu {
        background: #E4F4FA;
        margin-top: 2em;
    }

    .side-menu p {
        background: #D2EEF7;
        padding: 0.6em 0 0.6em 1em;
        margin: 0;
        color: #000000;
    }

    .side-menu ul {
        list-style: none;
        padding: 0.7em 0;
    }

    .side-menu ul li {
        padding-bottom: 0.7em;
        width: 50%;
        float: left;
    }

    .side-menu ul li.active {
        font-weight: bold;
    }

    .product-info {
        border: 1px solid #2A2A2A; padding: 0; background: #f2f2f2;
    }

    .section-2, .section-4 {
        background: #f3f3f4;
    }

    .section-3 {
        background: #fff;
    }

    .karen-walker #hdr-logo, .karen-walker .hdr-logo, .karen-walker .ftr-logo
    {
        display: none;
    }

    .karen-walker .section-2, .karen-walker .section-4 {
        background: #b4c7d3;
    }

    .karen-walker .find-a-stockist {
        display: none;
    }

    .karen-walker .ftr-nz, .karen-walker .ftr-au {
        display: none;
    }

    .karen-walker .hdr-logo-text, .karen-walker .ftr-logo-text {
        display: none;
    }

    .karen-walker .ftr-logo-kw {
        display: block;
    }

    .karen-walker a.button {
        background-color: #b4c7d3;
    }

    .karen-walker .product-description {
        background-color: #222;
    }

    .karen-walker .product-title {
        color: #b4c7d3;
    }

    .karen-walker .product-info {
        border: 1px solid #b4c7d3;
    }

    .karen-walker .enquiries-ftr {
        background-color: #b4c7d3;
    }

    .karen-walker .main-menu {
        display: none !important;
    }

    .new-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 10px;
      color: #fff;
      line-height: 40px;
      text-align: center;
      background: #1f8fee;
      position: absolute;
      right: 14px;
      top: 14px;
    }

    .sort-dd {
        width: 150px;
        font-size: 10px;
        padding: 0.25rem;
        height: 23px;
    }
}



/* min-width 641px, 40.063em medium screens */
@media only screen and (min-width: 40.063em) {
    .top-bar-section li:not(.has-form) a:not(.button) {
        padding: 0 10px;
    }
    body { 
        -webkit-text-size-adjust: none; 
    }
    form { margin-bottom: 0; }

    .main-menu-kw {
        display: none !important;
    }

    .karen-walker .main-menu-kw {
        display: block !important;
    }

    nav.top-bar {
        background: none;
    }

    nav.top-bar section ul li, nav.top-bar section ul li a, .top-bar-section li:not(.has-form) a:not(.button) {
        background: none;
    }

    nav.top-bar section ul li a {
        font-family: Roboto;
        text-transform: uppercase;
        color: #F2D399;
    }

    .top-bar-section .has-dropdown > a:after {
        border-color: rgba(242, 211, 153, 0.8) transparent transparent;
    }

    .top-bar-section ul li > a {
        font-size: 0.9em;
    }

    .home-slick {
        display: block;
        width: 100%;
        max-width: 1280px;
        margin: auto;
    }
    .home-slick .slide {
        height: 400px;
    }
    /*h1.curly-l:before {
        content: "";
        display: inline-block;
        background: url('../../UserFiles/Image/title-curl.png') no-repeat;
        background-size: cover;
        width: 29px;
        height: 9px;
        margin: 0 8px 0 0;
    }

    h1.curly-r:after {
        content: "";
        display: inline-block;
        background: url('../../UserFiles/Image/title-curl.png') no-repeat;
        background-size: cover;
        width: 29px;
        height: 9px;
        margin: 0 0 0 8px;
    }*/
    h1.title {
        font-size: 2em;
        padding: 1.1em 0;
    }
    /*
    h1.curly-l:before {
        background-size: auto;
        width: 44px;
        height: 18px;
        margin: 0 12px 0 0;
    }

    h1.curly-r:after {
        background-size: auto;
        width: 44px;
        height: 18px;
        margin: 0 0 0 12px;
    }*/

    .ftr-logo { 
        width: 80%; 
        padding: 1.1em 0 1.4em 0; 
    }


    .btn-prev, .btn-next{
        font-size: 1.6em;
        text-transform: uppercase;
        padding-bottom: 2em;
        color: #7C704F;
    }
    .login-panel {
        padding: 0 2em 2em 2em !important;
        margin-top: 2em;
    }
    .side-menu {
        margin-right: 1em;
    }
    .side-menu ul li {
        width: auto;
        float: none;
    }

    .asp-grid th.hide-for-small-only, .asp-grid td.hide-for-small-only {
        display: table-cell !important;
    }

    .asp-grid th.show-for-small-only, .asp-grid td.show-for-small-only {
        display: none !important;
    }

    .home-slick .slide.no1 {
        background-position: -60px 0;
    }

    .home-slick .slide.no5 {
        background-position: -60px 0;
    }
    .home-slick .slide.no8 {
        background-position: -60px 0;
    }
}

/* min-width 800px, large screens */
@media only screen and (min-width: 49.063em) {
    .fb-hdr-badge {
        display: block;
    }
    .home-slick .slide {
        height: 500px;
    }
    .home-slick .slide.no1 {
        background-position: -90px -30px;
    }
    .home-slick .slide.no2 {
        background-position: 0;
    }
    .home-slick .slide.no3 {
        background-position: 0 20px;
    }
    .home-slick .slide.no4 {
        background-position: 0 30px;
    }
    .home-slick .slide.no18{
        background-position: -20px -20px;
    }
}

@media only screen and (min-width: 51em) {
    .ftr-logo-text {
        display: block;
    }
    .ftr-nz {
        padding-left: 3rem;
    }
}

/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) {
    .main-menu-kw {
        display: none !important;
    }
    .karen-walker .main-menu-kw {
        display: block !important;
    }

    .home-slick .slide.no1 {
        background-position: 0 -100px;
        background-size: contain;
    }
    .home-slick .slide.no2 {
        background-position: 0;
    }
    .home-slick .slide.no3 {
        background-position: 0 -90px;
    }
    .home-slick .slide.no4 {
        background-position: 0 -80px;
    }
    .home-slick .slide.no5 {
        background-position: 0;
        background-size: cover;
    }
    .home-slick .slide.no8 {
        background-position: 0 -40px;
        background-size: contain;
    }
}

/* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) {
    .section-3.memento {
        background-image: url('../../Userfiles/Image/memento-bg.jpg');
        background-attachment: fixed;
    }
    .section-3.memento > div.row {
        background: #fff;
    }

    .home-slick .slide {
        height: 600px;
    }
    .home-slick .slide.no1 {
        background-position: 0 0;
    }
    .home-slick .slide.no2 {
        background-position: 0 -100px;
    }
    .home-slick .slide.no3 {
        background-position: 0 -100px;
    }
    .home-slick .slide.no4 {
        background-position: 0 -50px;
    }
    .home-slick .slide.no5 {
        background-position: 0 0;
    }
    .home-slick .slide.no8 {
        background-position: 0 0;
    }
}
