@import url("https://fonts.googleapis.com/css?family=Inder&subset=latin,latin-ext");

/*RESPONSIVE start*/
@media screen and (max-width: 320px) {
    body {
        font-size: 12px;
    }
    #wrapper {
        width: 90%;
    }
        nav.navigation li {
        width: 100%;
        float: none;
        display: block
    }
    nav {
        width: 100%;
    }
    article.boxitem {
        width: 100%;
        display: inline-table !important;
        padding: 0;
    }
    .bi1 p {
        width: 100%;
    }
    article.bi2, article.bi3 {
        width: 100%;
    }
    .boxitem h2 {
        padding: 1% 3% 1% 3%;
    }
    article p {
        padding: 0 3% 0 3%;
    }
    article.bi5 a.btn-info {
        padding: 4%;
    }
    #Contact2 .zone_data {
        float: none;
        width: 100%;
        margin: 0 1.333em 0 0;
    }
    #Contact2 .google_map {
        margin: 0 0 9% 0;
    }

}
@media screen and (min-width: 320px) and (max-width: 500px)  {
    body {
	font-size: 13px;
    }
    h4 {
        text-align: left;
    }
    #wrapper {
        width: 96%;
        padding: 0 2%;
    }
   .logo {
     float: none;
    margin: 0 auto;
   }
   .home nav {
        top: 0;
   }
    nav.navigation li {
        width: 100%;
        float: none;
        display: block;
        border-radius: 0;
        border-bottom: 1px solid #fff;
    }
    nav {
        width: 100%;
        padding: 0;
        margin: 0 auto 10px auto;
        float: none;
        text-align: center;
        color: #000;
        text-transform: uppercase;
        border-bottom: 2px solid #000;
        position: relative;
    }
    nav li a {
        padding: 0.5em 0;
    }
    .home_page .carousel-caption {
        bottom: 0;
    }
    .home_page .carousel-caption h4 {
        font-size: 1.5em;
    }
    .productItem .productTitle {
        font-size: 1.2em;
    }
    .productItem p {
        font-size: 0.9em;
    }
    .zone_highlight { 
        font-size: 1em;
    } 
    .home_page .carousel-caption p {
        font-size: 1em;
    }
    .home article.pi3 {
        width: 100%;
        border: 1px dotted #000;
        margin: 0 0 10px 0;
    }
    .bi1 p {
        width: 100%;
    }
    article.bi2, article.bi3 {
        width: 100%;
    }
    #Contact2 .zone_data {
        float: none;
        width: 100%;
        margin: 0 1.333em 0 0;
    }
    #Contact2 .google_map {
        margin: 0 0 9% 0;
    }
    .gallery_list li.gb3, .gallery_list li.gb4 {
        width: 47%;
    }
    .productItem.pi4 {
        width: 97% !important;
        margin: 10px auto;
        display: block;
        float: none;
    }
    .pi3 .productThumb {
        width: 100%;
    }
    .pi3 .priceDiv {
        width: 100%;
    }
    .pi3 .priceDiv h3, .pi3 .priceDiv h2, .pi3 .priceDiv p {
        width: 30%;
        float: left;
        clear: none;
        margin: 0;
        padding: 0 !important;
    }
    .productItem.pi3 .btn {
        width: 95%;
        margin: 0 auto !important;
        border-radius: 0;
        padding: 5px 5px;
    }
    .productItem.pi3 .addToCart{
        width: 100%;
        background-position: center;
    }
    
}
@media screen and (min-width: 480px) and (max-width: 767px)  {
    body {
        font-size: 14px;
    }
    #wrapper {
        width: 90%;
    }
    nav.navigation li {
        border-radius: 8px 8px 0 0;
    }
    .home nav {
        top: 0;
        float: left;
    }
    nav {
        width: 100%;
        position: relative;
        top: 0;
        float: lefT;
    }
    nav li.active a {
        padding: 0.5em 0 0.5em 0;
    }
    article.bi2, article.bi3 {
        width: 48%;
    }
    .gallery_list li.gb1 .imgLink, .gallery_list li.gb2 .imgLink {
        width: 52%;
    }
    .home_page .carousel-caption h4 {
        font-size: 3em;
    }
    .home_page .carousel-caption p {
        font-size: 1.5em;
    }
    .productItem.pi4 {
        width: 21%;
        margin: 4% 0%;
    }
    .productItem.pi4 .btn {
        width: 88% !important; 
    }

}
@media screen and (min-width: 768px) and (max-width: 1044px) { 
    body {
        font-size: 16px;
    }
    #wrapper {
        width: 1000px;
    }
    .productItem.pi4 {
        width: 22.8%;
    }
    .gallery_list li.gb1 {
        width: 46.4%;
    }
    .gallery_list li.gb5, .gallery_list li.gb6 {
        width: 30%;
    }
}
/*RESPONSIVE ends*/
