/*============================================================
	For Small Desktop
==============================================================*/



@media screen and (min-width: 1290px) and (max-width: 1899px) {
   .navbar-bootsnipp .navbar-nav > li > a{ font-size:18px !important; padding:15px 18px !important;}
}


@media (min-width:1200px) and (max-width: 1899) { 
/*#recipes video {   height: 280px !important;   width: 100%;}*/
.hidden-lg{ display:none;}
}

@media only screen and (min-width: 768px) and (max-width: 1899px) {

#recipes video{ 

 position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%; 
    height:50vh;
	object-fit: fill;

}
#story-freext>div:nth-of-type(1) { background-size:cover;}

#products .carousel-inner img
{ max-width:50%;}
#products .carousel-caption{ left:50%;}
#best-sellers .carousel-inner{ left:5%;}


.product-banner-title{ height:275px;}
.category-nav ul li{ min-width:auto; width:auto;} 
[class^="hvr-"]{ padding:10px 5px 15px; font-size: 12px;}
.carousel-caption h1{ font-size:36px;}
.carousel-caption p{ font-size:15px;}
#slider img{ max-width:60%; float:right;}


}




@media only screen and (min-width: 768px) and (max-width: 1399px) {
#products-display .article-slide .carousel-indicators{ /*---bottom:115px !important; ------*/}
.nav-justified > li > a {  font-size: 12px !important; line-height: 22px;}	
.nav > li > a{ padding:3px;}

}

@media (min-width: 1024px) and (max-width: 1290px) {
.navbar-bootsnipp .navbar-nav > li > a {
    font-size: 15px;
   padding:15px 18px;}
   
  .navbar-bootsnipp .navbar-nav > li.open:not(.disabled) > a, .navbar-bootsnipp .navbar-nav > li.active:not(.disabled) > a, .navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:hover, .navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:focus{ padding-left:18px;} 
#products .carousel-caption{ left:55%;}
#products #myCarousel .carousel-inner img{ width:55%}

.fa.fa-chevron-circle-right, .fa.fa-chevron-circle-left{ top:80px;}
#best-sellers #myCarousel2{max-height: 230px !important;}
#recipes{ background-size:contain; margin-top:0px;} 
.box-padding{ padding-top:100px;}
#recipes h3{ padding-bottom:25px;}
#recipes video{      width:100%; height:268px; }
.hidden-lg{ display:none;}


}

@media (min-width:720px) and (max-width: 1290px) {

.navbar-header {
   background-size:80% auto; padding: 0 10px 5px 25px !important;} 
    
 .navbar-header img{ width:80%;} 
 .navbar-brand{ width:200px;}
 
 .navbar-bootsnipp .navbar-nav > li > a {
    font-size: 15px;
   padding:10px 10px; font-size:11px;}
   
  .navbar-bootsnipp .navbar-nav > li.open:not(.disabled) > a, .navbar-bootsnipp .navbar-nav > li.active:not(.disabled) > a, .navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:hover, .navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:focus{ padding-left:10px;} 

#bs-example-navbar-collapse-1 .pt30 {
    padding-top: 10px !important;}
	
.carousel-caption{ top:12%;}
.carousel-caption h1{ font-size:200%;}
#slider .col-xs-offset-6{ margin-left:0%;}

.nav-justified > li > a {  font-size: 14px; line-height: 22px;}
.nav-justified img {    margin-bottom: 10px;}
#products #myCarousel .carousel-inner img{ width:55%; position:relative; top:100px;}
#products .carousel-caption{ top:0% !important;}
#products p{ font-size:85% !important;}
#best-sellers .carousel-inner{ height:305px !important; }
#recipes h3{ padding-bottom:0px; text-align:center;}
.sm-box-padding{ padding-top:30px !important;}
.sm-box-padding .text-right{text-align:center !important; padding-bottom:15px;}
/*#recipes video {   height: 340px;   width: 100%;}*/
#recipes{ margin-top:-35px;}

h2, h3{ font-size:200% !important;}
.hidden-lg{ display:none;}
h1{ font-size:100%;}
.product-banner-title{ height:200px;}
.nav-justified img{ margin-right:5px;}

	

}

@media (min-width:980px) and (max-width: 1270px) { 
/*#recipes video {   height: 408px !important;   width: 100%;}*/
.category-nav ul li{ width:50%; text-align:left;}
.fa-lg{ font-size:0.8em;}
.enquiry .col-md-2{ width: 100% !important; }


}


@media (min-width:720px) and (max-width: 799px) {
	
/*#recipes video {   height: 327px !important;   width: 100%;}*/	
}



@media (min-width: 980px) and (max-width: 1150px) {

/* slider */
.carousel-caption h3 {
  font-size: 45px;
}

/* works */


/* team */

.member-thumb {
  width: auto;
}
 #article-photo-carousel{ height:auto !important;}
 #products-display .article-slide .carousel-indicators{}
 [class^="hvr-"] {
    background: #f6f6f6 none repeat scroll 0 0;
    color: #363330;
    cursor: pointer;
    font-size: 11px;
    font-weight: 300;
    height: 65px;
    line-height: 18px;
    margin: 0;
    padding: 8px;
    text-decoration: none;
    text-transform: uppercase;
}
.category-nav ul li{ min-width:auto;}
.category-nav img {   margin-bottom: 10px;}
#recipes video{ 

    height:70vh !important;
	object-fit: fill;

}

}


/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {


/* slider */

.carousel-caption h2 {
  font-size: 55px;
}

.carousel-caption h3 {
  font-size: 36px;
}

/* services */

.service-item {
  margin: 0 auto 30px;
  text-align: center;
  width: 325px;
}

.service-icon {
  float: none;
  margin: 0 auto 15px;
  text-align: center;
  width: 50px;
}

.service-desc {
  margin-left: 0;
  position: relative;
  top: 0;
}

/* works */

.work-item {
  width: 33%;
}

/* team */

.member-thumb .overlay h5 {
  margin: 25px 0;
}

.member-thumb {
  margin: 0 auto;
}

/* fatcs */

#facts {
background-position: center top !important;
}
.counters-item {
  margin-bottom: 30px;
}

.counters-item i {
  margin: 0 0 15px;
}

.counters-item strong {
  font-size: 45px;
}

/* contact */

.contact-form .name-email input {
  margin-right: 0;
  width: 100%;
}

.footer-social {
  margin-top: 45px;
}

/* footer */

.footer-single {
  margin-bottom: 30px;
}
.hidden-lg{ display:none;}
.category-nav{ margin:0 auto; width:75%;}
.category-nav ul li{ min-width:260px; text-align:left;}
#recipes video{ 

    height:100vh !important;
	object-fit: fill;

}
.enquiry .col-md-2{ width: 100% !important; }

}


/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

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

.sec-sub-title p {
  font-size: 14px;
}

/* slider */
.carousel-caption h2 {
  font-size: 35px;
}

.carousel-caption h3 {
  font-size: 22px;
}

.carousel-caption p {
  font-size: 14px;
}

.social-links {
  margin-top: 20%;
}

/* services */

.service-item {
  margin: 0 auto 30px;
  text-align: center;
  width: 280px;
}

.service-icon {
  float: none;
  margin: 0 auto 15px;
  text-align: center;
  width: 50px;
}

.service-desc {
  margin-left: 0;
  position: relative;
  top: 0;
}

/* works */

.work-item {
  left: 5% !important;
  width: 90%;
}

/* team */

.team-member {
  margin-bottom: 30px;
}

.team-member:last-child {
  margin-bottom: 0;
}

.member-thumb {
  margin: 0 auto;
}

/* facts */

#facts {
background-position: center top !important;
}

.counters-item {
  margin-bottom: 30px;
}

/* contact */
.contact-address {
  margin-bottom: 30px;
}

.footer-social {
  margin-top: 20px;
  text-align: center;
}

.footer-social li {
  display: inline-block;
}

.footer-social li a {
  margin: 0 10px;
}

/* footer */

.footer-single {
  margin-bottom: 30px;
}



/* New */

.navbar-header{ background-size:100% auto;}
.navbar-header {
    height: 135px;    padding: 15px 0 8px 20px;}
#navigation .pt30{ padding-top:0px !important;}	

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse{ background:rgba(0, 0, 0, 0.8); padding-top:15px; max-height:375px;}
.carousel-caption h1{ font-size: 150%; letter-spacing: -1px;}
#slider .col-xs-offset-6{ margin-left:0%;}

h1, h2, h3{ font-size:150% !important;}
.devider{ margin-top:15px;}
#story-freext p{ padding:2% 0%;}
#story-freext > div:nth-of-type(2){  left:0 !important; height:400px !important; top:72% !important;}
.nav-justified img{ max-width:15% !important;}
.nav-justified > li > a{ text-align:left !important;}
#products .carousel-caption{top: 30% !important; left:10px;}
#products #myCarousel{ height:975px !important;}
#best-sellers{ padding-left:20px; padding-right:20px;}
#best-sellers #myCarousel2 {    height: auto !important;  max-height: 372px !important;}
#best-sellers .carousel-inner{ left:15px;}
#recipes{ margin:0px !important; background:#fbfbfb; padding-top:30px; border-top:1px solid #e9e9e9;}
.box-padding{ padding:0px;}
.sm-box-padding{ text-align:center !important;}
#recipes h3{ padding-bottom:10px;}
.sm-box-padding .text-right{ text-align:center !important;}
.social-links{    margin-top: 5%;}
.social-red{ margin-bottom:20px;}
.team-member{ margin-bottom:0px;}
#recipes video{ width: 100%;}
.navbar-header{ height:120px;}
.btn-danger{font-size: 12px; padding:5px 12px !important;}
#products .carousel-caption {  
    height: 258px;
    overflow-x: scroll;
}


.panel-heading img{ width:auto;}
#best-sellers .panel-default > .panel-heading{ background:none !important;}
#best-sellers .carousel-inner {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
    height: 310px !important;
    text-align: center;
    width: 50%; margin:0 auto;
}
#best-sellers .panel-default{ box-shadow:none !important;}

#story-freext:nth-of-type(2) {   
    height: auto;    min-height: 480px;}
.team-member img{ max-width:100%; width:100%;}
.product-banner-title{ height:200px;}
.category-nav ul li{ min-width:50%; text-align:left;}
.hidden-sm{ display:none;}
.innerpage #navigation{ background:#202637 !important;}
.innerpage .navbar-bootsnipp .navbar-nav > li > a{ color:#fff;}


h1{ font-size:100%;}
.product-banner-title, .direct-spices-banner{ height:150px !important;}
#story-freext > div:nth-of-type(1){ background:none !important;}
.enquiry .col-md-2{ width: 100% !important; }
	
}


/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {


/* services */

.service-item {
  margin: 0 auto 30px;
  text-align: center;
  width: 325px;
}

.service-icon {
  float: none;
  margin: 0 auto 15px;
  text-align: center;
  width: 50px;
}

.service-desc {
  margin-left: 0;
  position: relative;
  top: 0;
}

/* works */

.work-item {
  left: inherit !important;
  width: 50%;
}

}

@media only screen and (min-width: 620px) and (max-width: 767px) {
#products .carousel-caption{ top: 75%; }

  }


@media only screen and (max-width: 480px){
	
.navbar-bootsnipp .navbar-brand{ width:75%;}
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse{ padding-top:5px;}
.navbar-header{ height:120px;}
.btn-danger{font-size: 10px; padding:5px 12px !important;}
.devider:before,
.devider:after {
  content: "_______________";
  color: #e6e8ea;
  position: relative;
  bottom: 6px;
}
#story-freext > div:nth-of-type(2){ display:none;}
#story-freext > div:nth-of-type(1){ position:relative; height:auto;}
#story-freext .pt50{ padding-top:0px;}
#products .carousel-caption{ top:18%;}
body > section, .footer{ padding:20px 0;}
section:nth-of-type(2){ height:auto;}
#products .carousel-caption {  
    height: 258px;
    overflow-x: scroll;
}
#best-sellers #myCarousel2{ max-height:auto;}
#products #myCarousel{ height:930px !important;}
.nav-justified{ margin-top:15px;}
.navbar-header{ background-size:100% auto !important;}
.category-nav ul li{ min-width:100%; text-align:left;}	
#best-sellers .carousel-inner{ width:75%; left:0px;}
.panel-heading img{ width:auto !important;}
h1{ font-size:100%;}
.product-banner-title, .direct-spices-banner{ height:80px !important;}
}