/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    .category-item {
       margin-right: 20px;
    } 
    .slider-tittle {
        bottom: 10%;
    }
}


/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    .categories-wrapper,
     .catalog-items-wrap {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    }
    .category-item{
        margin-bottom: 40px;
    }
    .slider-tittle {
        bottom: 10%;
    }
    .slider-tittle h1 {
        font-size: 30px;
    }
    .slider-tittle .slider-feature{
    font-size: 20px
    }
    .index-nav ul {
    display: none;
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0;
    z-index: 1001;
    background-color: #fcff19;
    }
    .index-nav li {
        display: block;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
        .slider-tittle {
        bottom: 10%;
    }
    .slider-tittle h1 {
        font-size: 30px;
    }
    .slider-tittle .slider-feature{
    font-size: 20px
    }
    
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    .slider-tittle {
        bottom: 0%;
    }
    .slider-tittle h1 {
        font-size: 20px;
    }
    .slider-tittle .slider-feature{
    font-size: 10px
    }

}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
        .slider-tittle {
        bottom: 0%;
    }
    .slider-tittle h1 {
        font-size: 30px;
    }
    .slider-tittle .slider-feature{
    font-size: 20px
    }
}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {


/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {


/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}