﻿@font-face 
{
    font-family: "proxima-nova-alt-bold";
    src: url("../fonts/proxima-nova-alt-bold.otf") format("opentype"),
         url("../fonts/proxima-nova-alt-bold.ttf") format("truetype");
    
}

@font-face
{
    font-family: "proxima-nova-light";
    src: url("../fonts/ProximaNova-Light.otf") format("opentype"),
         url("../fonts/proximanova-light-webfont.ttf") format("truetype");
}

@font-face
{
    font-family: "pt-sans-caption-bold";
    src: url("../fonts/PT_Sans-Caption-Web-Bold.ttf") format("truetype");
}

@font-face
{
    font-family: "pt-sans-caption-regular";
    src: url("../fonts/PT_Sans-Caption-Web-Regular.ttf") format("truetype");
}

.body-content {
        background-color: white;
    }

.privacyBadgerReplacementButton {
        visibility: hidden;
    }

.social-div {
        background-color: #646464;
        margin-top: -16px;
        margin-bottom: -16px;
    }

    .fav-button {
        width: 30px;
    }

    .items-in-favourites {
        background-color: #E44747;
        border-radius: 5px;
        color: white;
    }

@media only screen and (max-width: 1200px) and (min-width: 801px) {

    
    .footer-image {
        width: 100%;
    }

    .fb-like {
        position: relative;
        top: -30px;
    }

     body {
         background-color: black;
        /*background-image: url("../images/Mountain bg.png"), linear-gradient(#fff, #77b8d0 70%);
        background-repeat: no-repeat;
        background-position:bottom;*/
    }

     .old-browser{
        color: white;
    }

    a {
        color: inherit;
        text-decoration: inherit;
      }

    a img {
        width: inherit;
        height: inherit;
        margin: inherit;
        padding: inherit;
    }


    header {
        background-color: black;
        color: #fff;
        width: 100%;
    }

        header > div {
            display: inline-block;
            width: 35%;
        }

    #main-title {
        padding: 0;
        margin-left: -45px;
    }

        #main-title img {
            width: 160%;
            margin-left: auto;
            margin-right: auto;
        }

    input {
        font-family: pt-sans-caption-regular;
    }

    #search-menu {
        vertical-align: middle;
    }

    #search-menu input{
        width: 90%;
        background-color: #646464;
        border: 0;
        color: white;
        font-size: large;
        text-align: center;
    }

    #search-menu img{
        width: 4%;
    }

    .searchbar-alert::-webkit-input-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert:-moz-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert::-moz-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert:-ms-input-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert::-ms-input-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert:placeholder-shown {
        color: red;
        background-color: white;
    }

    .body-content {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .body-content > div, section {
        background-color: white;
    }


    #main-logo {
        padding-right: 0;
    }

        #main-logo > a img {
            width: 75%;
            padding: 20px;
        }

    nav {
        background-color: #9ec960;
        font-family: pt-sans-caption-bold;
        text-align: center;
        margin-bottom: -16px;
    }

        nav .ul-reg-nav {
            display: table;
            font-family: pt-sans-caption-bold;
            width: 90%;
        }

        nav .ul-reg-nav.stick {
            position: fixed;
            top: -16px;
            z-index: 3;
            display: table;
            font-family: pt-sans-caption-bold;
            width: 98%;
            background-color: #9ec960;
            padding-left: 0;
        }

        nav .reg-nav {
            font-size: medium;
            list-style-type: none;
            display: table-cell;
            padding-top: 5px;
            padding-bottom: 5px;
            width: 25%;
            color: #fff;
            text-align: center;
        }

        nav > ul:first-child {
            margin-right: 5px !important;
        }

        #nav-menu {
            margin-top: -16px;
            font-family: proxima-nova-alt-bold;
            color: #fff;
            background-color: #646464;
            visibility: hidden;
            position: absolute;
            z-index: 2;
            width: 98%;
            text-align: center;
            
        }

        #nav-menu.menu-stick {
            position: fixed;
            top: 70px;
            width: 98%;
        }

        #nav-menu ul {
            padding-left: 0;
            padding-right: 0;
            /*align-items: center;*/
        }

        #nav-menu li {
            padding-top: 10px;
            padding-bottom: 10px;
            border-top: solid 1px #fff;
            /*margin-left: -40px;*/
            list-style-type: none;
        }

        #nav-menu li:first-child{
            padding-top: 0;
            border-top: none;
        }

        #nav-menu li:last-child{
            padding-bottom: 0;
        }

        .shopping-image
        {
            width: 45px;
            height: 42px;
        }


    .social-icon {
        margin: 3px;
        height: 8%;
        width: 8%;
    }

    .social-list li:nth-of-type(5n) img {
        margin: 3px;
        height: 20%;
        width: 20%;
    }

     .social-list {
        list-style-type: none;
        margin-left: 0;
    }

    .social-list li {
        display: inline;
    }

    

    .pets-icon {
        width: 100%;
    }

    .like-icon {
        width: 100%;
    }


    #bottom-page-content {
        background-color: #f3f3f5;
        color: #646464;
        width: 100%;
    }

        #bottom-page-content > div:first-of-type {
            width: 25%;
        }

        #bottom-page-content > div {
            display: inline-block;
            vertical-align: middle;
            white-space: nowrap;
            width: 30%;
           margin-left: auto;
           margin-right: auto;
        }

    #bottom-page-content:first-child {
        font-family: proxima-nova-alt-bold;
    }

    .bottom-page-list {
        list-style-type: none;
        font-family: proxima-nova-light;
        margin-left: auto;
        margin-right: auto;
    }

        .bottom-page-list strong {
            font-family: proxima-nova-alt-bold;
        }


    .chat-icon {
        width: 100%;
        margin-left: -30px;
    }

    .chat-div {
        font-size: large;
        padding-bottom: 20px;
        padding-left: 40px;
        margin-left: auto;
        margin-right: auto;
    }

    .customers-div {
        font-size: x-large;
        padding-left: 5%;
    }

    .know-us-div {
        font-size: x-large;
    }

    footer ul {
        width: 85%;
        display: table;
        margin-left: 10px;
    }

    footer li {
        position: center;
        text-align: center;
        font-size: large;
        color: white;
        width: 25%;
        display: table-cell;
        list-style-type: none;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    footer {
        margin-top: -16px;
        background-color: #9ec960;
        font-family: proxima-nova-alt-bold;
    }

    iframe {
        width: 260px;
        height: 200px;
    }

}

/* 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    MIN-WIDTH 551 px, MAX-WIDTH 800 px 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/

@media only screen and (max-width: 800px) and (min-width: 551px) {

    .footer-image {
        width: 90%;
        margin-left: 20px;
    }

    body {
        background-color: black;
        /*background-image: url("../images/Mountain bg.png"), linear-gradient(#fff, #77b8d0 70%);
        background-repeat: no-repeat;
        background-position:bottom;*/
    }

    a {
        color: inherit;
        text-decoration: inherit;
      }

    a img {
        width: inherit;
        height: inherit;
        margin: inherit;
        padding: inherit;
    }


    header {
        background-color: black;
        color: #fff;
        width: 100%;
    }

        header > div {
            display: inline-block;
            width: 35%;
        }

    #main-title {
        padding: 0;
        margin-left: -45px;
    }

        #main-title img {
            width: 160%;
            margin-left: auto;
            margin-right: auto;
        }

    input {
        font-family: pt-sans-caption-regular;
    }

    #search-menu {
        vertical-align: middle;
    }

    #search-menu input{
        width: 90%;
        background-color: #646464;
        border: 0;
        color: white;
        font-size: large;
        text-align: center;
    }

    #search-menu img{
        width: 4%;
    }

    .searchbar-alert::-webkit-input-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert:-moz-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert::-moz-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert:-ms-input-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert::-ms-input-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert:placeholder-shown {
        color: red;
        background-color: white;
    }

    .body-content {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .body-content > div, section {
        background-color: white;
    }


    #main-logo {
        padding-right: 0;
    }

        #main-logo > a img {
            width: 50%;
            padding: 20px;
        }

    nav {
        background-color: #9ec960;
        font-family: pt-sans-caption-bold;
        text-align: center;
        margin-bottom: -16px;
    }

        nav .ul-reg-nav {
            display: table;
            font-family: pt-sans-caption-bold;
            width: 90%;
        }

        nav .ul-reg-nav.stick {
            position: fixed;
            top: -16px;
            z-index: 3;
            display: table;
            font-family: pt-sans-caption-bold;
            width: 98%;
            background-color: #9ec960;
            padding-left: 0;
        }

        nav .reg-nav {
            font-size: medium;
            list-style-type: none;
            display: table-cell;
            padding-top: 5px;
            padding-bottom: 5px;
            width: 25%;
            color: #fff;
            text-align: center;
        }

        nav > ul:first-child {
            margin-right: 5px !important;
        }

        #nav-menu {
            margin-top: -16px;
            font-family: proxima-nova-alt-bold;
            color: #fff;
            background-color: #646464;
            visibility: hidden;
            position: absolute;
            z-index: 2;
            width: 98%;
            text-align: center;
            
        }

        #nav-menu.menu-stick {
            position: fixed;
            top: 70px;
            width: 98%;
        }

        #nav-menu ul {
            padding-left: 0;
            padding-right: 0;
            /*align-items: center;*/
        }

        #nav-menu li {
            padding-top: 10px;
            padding-bottom: 10px;
            border-top: solid 1px #fff;
            /*margin-left: -40px;*/
            list-style-type: none;
        }

        #nav-menu li:first-child{
            padding-top: 0;
            border-top: none;
        }

        #nav-menu li:last-child{
            padding-bottom: 0;
        }

        .shopping-image
        {
            width: 45px;
            height: 42px;
        }


    .social-icon {
        margin: 3px;
        height: 8%;
        width: 8%;
    }

    .social-list li:nth-of-type(5n) img {
        margin: 3px;
        height: 20%;
        width: 20%;
    }

     .social-list {
        list-style-type: none;
        margin-left: 0;
    }

    .social-list li {
        display: inline;
    }


    .pets-icon {
        width: 90%;
        padding-left: 20px;
    }

    .like-icon {
        width: 100%;
    }

    .fb-like {
        position: relative;
        top: -20px;
    }

    #bottom-page-content {
        background-color: #f3f3f5;
        color: #646464;
        width: 100%;
    }

        #bottom-page-content > div:first-of-type {
            width: 25%;
        }

        #bottom-page-content > div {
            display: inline-block;
            vertical-align: middle;
            white-space: nowrap;
            width: 30%;
           margin-left: auto;
           margin-right: auto;
        }

    #bottom-page-content:first-child {
        font-family: proxima-nova-alt-bold;
    }

    .bottom-page-list {
        list-style-type: none;
        font-family: proxima-nova-light;
        margin-left: auto;
        margin-right: auto;
    }

        .bottom-page-list strong {
            font-family: proxima-nova-alt-bold;
        }


    .chat-icon {
        width: 100%;
        margin-left: -30px;
    }

    .chat-div {
        font-size: large;
        padding-bottom: 20px;
        padding-left: 40px;
        margin-left: auto;
        margin-right: auto;
    }

    .customers-div {
        font-size: large;
        padding-left: 15px;
    }

    .know-us-div {
        font-size: large;
    }

    footer ul {
        width: 85%;
        display: table;
        margin-left: 10px;
    }

    footer li {
        position: center;
        text-align: center;
        font-size: large;
        color: white;
        width: 25%;
        display: table-cell;
        list-style-type: none;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    footer {
        margin-top: -16px;
        background-color: #9ec960;
        font-family: proxima-nova-alt-bold;
    }

    iframe {
        width: 160px;
        height: 140px;
        margin-left: 10px;
    }

}



/* 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    MAX-WIDTH 550 px 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/

@media only screen and (max-width: 550px) 
{

    .footer-image {
        width: 80%;
        margin-top: 15px;
        margin-left: 17%;
    }

    body {
        background-color: black;
        /*background-image: url("../images/Mountain bg.png"), linear-gradient(#fff, #77b8d0 70%);
        background-repeat: no-repeat;
        background-position:bottom;*/
    }

    #commentform input {
        width: 100%;
    }

    a {
        color: inherit;
        text-decoration: inherit;
        /*width: inherit;
        height: inherit;
        margin: inherit;
        padding: inherit;*/
    }

    a img {
        width: inherit;
        height: inherit;
        /*margin: inherit;
        padding: inherit;*/
    }

    header {
        background-color: black;
        color: #fff;
        width: 100%;
    }

        header > div {
            display: inline-block;
            width: 35%;
        }

    #main-title {
        padding: 0;
        margin-left: -45px;
    }

        #main-title img {
            width: 180%;
            margin-left: auto;
            margin-right: auto;
        }

    input {
        font-family: pt-sans-caption-regular;
    }

    #search-menu {
        vertical-align: middle;
    }

    #search-menu input{
        width: 90%;
        background-color: #646464;
        border: 0;
        color: white;
        font-size: large;
        text-align: center;
    }

    #search-menu img{
        width: 4%;
    }

    .searchbar-alert::-webkit-input-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert:-moz-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert::-moz-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert:-ms-input-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert::-ms-input-placeholder {
        color: red;
        background-color: white;
    }

    .searchbar-alert:placeholder-shown {
        color: red;
        background-color: white;
    }

    .body-content {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .body-content > div, section {
        background-color: white;
    }


    #main-logo {
        padding-right: 0;
    }

        #main-logo > a img {
            width: 40%;
            padding: 20px;
        }

    nav {
        background-color: #9ec960;
        font-family: pt-sans-caption-bold;
        text-align: center;
        margin-bottom: -16px;
        width: 100%;
    }

        nav .ul-reg-nav {
            display: table;
            font-family: pt-sans-caption-bold;
            width: 90%;
            margin-left: -20px;
        }

        nav .ul-reg-nav.stick {
            position: fixed;
            top: -16px;
            z-index: 3;
            display: table;
            font-family: pt-sans-caption-bold;
            width: 95%;
            background-color: #9ec960;
            margin-left: 1px;
            padding-left: 0;
        }

        nav .reg-nav {
            font-size: small;
            list-style-type: none;
            padding-top: 5px;
            padding-bottom: 5px;
            display: table-cell;
            width: 25%;
            color: #fff;
            text-align: center;
        }

        nav .reg-nav.sticky-nav {
            width: 5%;
        }

        nav > ul:first-child {
            margin-right: 5px !important;
        }

        #nav-menu {
            width: initial;
            margin-top: -16px;
            font-family: proxima-nova-light;
            color: #fff;
            background-color: #646464;
            visibility: hidden;
            position: absolute;
            z-index: 2;
            text-align: center;
            width: 96%;
        }

        #nav-menu.menu-stick {
            position: fixed;
            top: 70px;
            width: 95%;
        }

        #nav-menu ul {
            list-style-type: none;
            padding-right: 0;
            padding-left: 0;
        }

        #nav-menu li {
            padding-top: 5px;
            padding-bottom: 5px;
            border-top: solid 1px #fff;
            /*margin-left: -40px;*/
        }

        #nav-menu li:first-child{
            padding-top: 0;
            border-top: none;
        }

        #nav-menu li:last-child{
            padding-bottom: 0;
        }

        .shopping-image
        {
            width: 45px;
            height: 42px;
        }


    .social-icon {
        margin: 3px;
        height: 10%;
        width: 10%;
    }

    .social-list li:nth-of-type(5n) img {
        margin: 3px;
        height: 25%;
        width: 25%;
    }

    .social-list {
        list-style-type: none;
        margin-left: 0;
    }

    .social-list li {
        display: inline;
    }

    .pets-icon {
        width: 90%;
        display: block;
        padding-left: 30px;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }

    .like-icon {
        width: 100%;
    }

    .fb-like {
        position: relative;
        top: -30px;
    }

    #bottom-page-content {
        /*display: table;*/
        background-color: #f3f3f5;
        color: #646464;
        width: 100%;
        padding-bottom: 20px;
    }

        #bottom-page-content > div {
            /*display: table-cell;*/
            vertical-align: top;
            white-space: nowrap;
            display: block;
            width: 90%;
            
        }

        #bottom-page-content > div li {
            margin-left: 33.33333333%;
        }


       .bottom-page-list li:first-of-type {
            font-family: proxima-nova-alt-bold;
        }

       .bottom-page-list strong {
            font-family: proxima-nova-alt-bold;
        }

    .bottom-page-list {
        
        font-family: proxima-nova-light;
        list-style-type: none;
    }

     


    .chat-icon {
        width: 0;
        height: 0;
    }

    .chat-div {
        visibility: hidden;
        width: 0px;
        height: 0px;

    }

    .customers-div {
        font-size: large;
        line-height: 20px;
        padding-left: 0
    }

    .know-us-div {
        margin-top: -20px;
        font-size: large;
        line-height: 20px;
    }

    footer ul {
        width: 80%;
        display: table;
        margin-left: -10px;
    }

    footer li {
        position: center;
        text-align: center;
        font-size: medium;
        color: white;
        width: 25%;
        display: table-cell;
        list-style-type: none;
        padding: 10px 2px 10px 2px;
    }

    footer {
        margin-top: -16px;
        background-color: #9ec960;
        font-family: proxima-nova-alt-bold;
        width: 100%;
        height: auto;
    }

    iframe {
        width: 80%;
        margin-left: 18%;
        margin-top: 20px;
    }
}
