/* //////if css3*/
@media screen and (min-width: 0px) { 

	#capsule {max-width: 1000px; width: auto;}
	#wrapper {/*padding: 0 20px;*/}
		
}

/*under base size*/
@media screen and (max-width: 970px) {

.nav-on,
.nav-on body {overflow: hidden;}

#main-header {border-radius: 0; position: fixed; top: 0; left: 0; width: 100%; margin: 0; height: 60px; padding: 0;}
#wrapper {padding: 60px 15px 15px;}

	#nav-toggle {display: block; width: 44px; height: 0; overflow: hidden; padding: 35px 0 0; background: url(images/nav_toggle.png) no-repeat; position: absolute; top: 12px; right: 20px; cursor: pointer;}

    #main-nav {position: fixed; top: 60px; right: 0px; bottom: 0; background: #7fafbd url(images/palm_bg.jpg); width: 220px; text-align: center; display: none; z-index: 1000; overflow-y: auto;}
    #main-nav > ul {padding: 0; text-align: center;}
    #main-nav > ul > li {display: block; border-bottom: 1px solid rgba(0,0,0,.2);}
    #main-nav > ul > li > a {padding: 0; -moz-border-radius: 0!important;  -webkit-border-radius: 0!important;  border-radius: 0!important; padding: 15px; }

    #main-nav > ul > li#main-nav-emupdates {display: block;}

     #main-nav ul ul {display: block; width: auto; position: static; margin: 0; height: auto; padding: 0;}
     #main-nav ul ul li a {background: none}
     #main-nav ul ul li a:hover {color: #3B6298!important; text-shadow: none; }

    .nav-on #nav-toggle {opacity: .5;}
    .nav-on #main-nav {display: block;}

    #main-logo {width: 150px; padding: 83px 0 0; background-size: cover; top: 3px;}

    #utility-emupdates { right: 75px; text-indent: -9999px; width: 25px; top: 15px; display: none; }

    .product-category-social {display: none;}

    .detail-breadcrumbs {display: none;}

    .page-header-details {/*background: none!important;*/ padding: 100px 0 0!important; height: 0!important; overflow: hidden!important;}
    .page-header-details h1 {display: none!important;}    

    .page-header-details-title {
      height: auto!important;

    }
    .page-header-details-title h1 {
      display: block!important;
      position: static;
      width: 100%!important;
     

    }

    .page-header-details-title h1 img {
      width: auto!important;
      max-width: 100%!important;
    }

    #product-nav ul.ui-tabs-nav {
      display: none
    }

    .ui-tabs .product-nav-content-container.ui-tabs-hide {
      display: block!important;
    }

    .product-nav-content-container {
      min-height: 0;
    }

    .tab-heading,
    .product-nav-content-container .tab-heading {
      display: block; padding: 4px 10px; font: 26px/1em 'GnuolaneRgRegular', sans-serif; color: #fffbcf; text-transform: uppercase; text-decoration: none; border-radius: 8px;text-shadow: 1px 1px 1px #000; margin: 0 0 1em; background: url(images/nav_active.png) repeat-x; color: #fff!important; background-size: 100% 100%;
    }

    .tab-heading-expander,
    .product-nav-content-container .tab-heading-expander {
      cursor: pointer;
      margin: 0;
    }

    .tab-heading-expander.on,
    .product-nav-content-container .tab-heading-expander.on {
      margin: 0 0 1em;
    }

    .tab-heading-expander:after,
    .product-nav-content-container .tab-heading-expander:after {
      content:"+";
      font-weight: bold;
      margin: 0 0 0 5px;

    }

    .tab-heading-expander.on:after,
    .product-nav-content-container .tab-heading-expander.on:after {
      content:"-";
    }

    .tab-expander {
      display: none;
    }

    .tab-expander.on {
      display: block;
    }

    #recipe-nav > ul {
      display: none;
    }

     #recipe-nav #related.ui-tabs-hide {
      display: block!important;
     }

    #recipe-nav #comments,
    #recipe-nav #products {
      display: none!important;
    }

}

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

	.page-header h1 {width: 100%;}
	.page-header h1 img {width: 100%;}
	
	
	#recipe-category .ui-tabs-nav {float: none; width: auto; margin: 0 0 20px;}
	#recipe-category .ui-tabs-panel {margin-left: 0;}
	
	#recipe-category .ui-tabs-nav li {display: inline-block;}
	
	.section-block-recipe-photo-col,
	.section-block-product-photo-col {width: 210px;}
	.section-block-recipe-detail,
	.section-block-product-detail {margin-left: 225px;}
	
	#recipe-side-nav ul li,
	#product-side-nav ul li {padding-left: 52px;}
		
}




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

	table.location {display: block;  width: 100%;}
	table.location tr {display: block;  width: 100%;}
	table.location tr td {display: block; width: 100%;}
	table.location img {max-width: 300px!important; width: 98%!important; height: auto!important; margin: 10px 0!important;}

}


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

	.section-block-recipe-photo-col,
	.section-block-product-photo-col {width: auto; floaT: none; overflow: hidden;}
	.section-block-recipe-detail,
	.section-block-product-detail {margin-left: 0;}
	
	
	.recipe-photo,
	.product-photo {width: 50%!important; float: left;}
	#recipe-side-nav,
	#product-side-nav {margin-left: 53%; margin-top: 20px; max-width: 210px;}
	
	#recipe-nav ul.ui-tabs-nav,
	#product-nav ul.ui-tabs-nav {background-size: auto 120%; background-position: center center;}

	#recipe-nav ul.ui-tabs-nav li a,
	#product-nav ul.ui-tabs-nav li a {padding: 5px 10px; line-height: 1em; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;  }
	
	#recipe-nav ul.ui-tabs-nav li.ui-state-active a,
	#product-nav ul.ui-tabs-nav li.ui-state-active a {background: #D4678F;}

	#recipe-nav ul.ui-tabs-nav,
	#product-nav ul.ui-tabs-nav {padding: 10px;} 


	#billboard-prev, #billboard-next {display: none;}

	#billboard-pager {display: block; text-align: center; margin: 5px 0 0;}

	#billboard-pager span {display: inline-block; width: 30px; height: 0; overflow: hidden; padding: 10px 0 0; background: #ccc; margin: 0 2px;}
	#billboard-pager span.cycle-pager-active {background: #7faebc;}

	.search-box {width: 100%; margin: 0 0 5px;}



  .recipes-side-navigation {
    float: none;
    width: auto;
    text-align: center;
  }

   .recipes-side-navigation li {
    margin: 2px;
    display: inline-block;
    vertical-align: top;
   }

   .recipes-grid {
    margin: 2em 0 0;
    padding: 0;
   }
}


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

	/*.page-header {overflow: visible; height: auto; background-size: 200% auto; background-position: top right; padding-top: 26%;}
	.page-header h1 {position: static; background: #fff; padding: 10px 15px 7px; width: auto; -moz-border-radius: 0 0 15px 15px; -webkit-border-radius: 0 0 15px 15px; border-radius: 0 0 15px 15px;  }*/
	
	.page-header h1 {margin: 0; padding: 0; list-style: none; position: absolute; bottom: 5px; left: 20px; font: 2.5em 'thirstyroughboldtwo', Arial, Helvetica, Helvetica Neue, sans-serif; color:#fff; text-shadow: 2px 2px 1px #000;}
	
	
	.page-header h1 img {width: 50%; max-width: 210px;}


  .page-header-details-title {
    margin: 0;
  }
  .page-header-details-title h1 {
    border-radius: 15px 15px 0 0!important;
    width: auto!important;

  }
    .page-header-details-title h1 img {
      width: 100%!important; max-width: 210px!important;

    }




	
	.main-col {float: none!important; width: auto!important}
	.side-col {float: none!important; width: auto!important}

	#hp-promo-wrapper .side-col-left {width: 100%;}

	.section-block-promo-middle {margin-left: 0;}
	.section-block-promo-right {margin-left: 0;}
}



@media screen and (max-width: 600px) {
  .recipes-grid:after,
  #recipe-category .recipes-carousel:after,
  #product-container:after,
  #category-container:after {
    clear: both;
    display: block;
    content:"";
  }


  #product-container li,
  #category-container li {
    display: block;
    width: auto;
    height: auto;
    float: none;

  }

  .recipes-grid .recipes-rotator-item,
  #product-container > nav > ul > li,
  #recipe-category .recipes-carousel li,
  #product-container > nav > ul > a,
  #category-container a {
    float: left;
    width: 50%;
    display: block;
    margin: 0!important;
  }

  .recipes-grid .recipes-rotator-item:nth-child(2n+1),
  #recipe-category .recipes-carousel:nth-child(2n+1),
  #product-container > nav > ul > li:nth-of-type(2n+1),
  #product-container > nav > ul > a:nth-of-type(2n+1),
  #category-container a:nth-of-type(2n+1) {
    clear: left;
  }

  .recipes-grid .recipes-rotator-item img,
  #recipe-category .recipes-carousel img,
  #product-container img,
  #category-container img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    height: auto;
  }

}

@media screen and (max-width: 560px) {
  .billboard-slide img.billboard-sm {display: block;}
  .billboard-slide img.billboard-lg {display: none;}
}

@media screen and (max-width: 530px) {
	
.page-header h1 {margin: 0; padding: 0; list-style: none; position: absolute; bottom: 5px; left: 20px; font: 2em 'thirstyroughboldtwo', Arial, Helvetica, Helvetica Neue, sans-serif; color:#fff; line-height: inherit;}

	#main-logo {width: 150px; padding: 83px 0 0;}
	#wrapper {padding: 60px 15px 15px;}
	

	
	#recipe-side-nav,
	#product-side-nav {margin: 0 auto; max-width: none;}

  #recipe-side-nav ul,
  #product-side-nav ul {padding-top: 0;}

  #recipe-side-nav ul li,
  #product-side-nav ul li {float: left; width: 28%; padding: 10px 0; background-size: 200% 150%; background-position: center right; text-align: center;}

  #recipe-side-nav ul li:last-child,
  #product-side-nav ul li:last-child {
    width: 43%;
  }

	.recipe-photo,
	.product-photo {width: 100%!important; float: none;}
	
	#home-featured-recipes {
    margin-top: 15px;
  }
	



  .related-recipes-carousel:after {
    content:"";
    display: block;
    clear: both;
  }

  .related-recipes-carousel li {
    float: left;
    width: 33.33%;
  }

  .related-recipes-carousel li:nth-child(3n+1) {
    clear: left;
  }

  .related-recipes-carousel img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
  }


  #product-nav .product-nav-content-container #slick-recipes:not(.slick-slider) li {
    float: left;
    width: 50%;
  }

  #product-nav .product-nav-content-container #slick-recipes:not(.slick-slider) li:nth-child(3n+1) {
    clear: none;
  }

  #product-nav .product-nav-content-container #slick-recipes:not(.slick-slider) li:nth-child(2n+1) {
    clear: left;
  }

}

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

	#wrapper {padding: 60px 10px 10px;}
}


@media (min-width: $screen-sm-min) {
	 
	.coupon-block {
		float:none;
		margin-right:10px;
}
}

@media (min-width: $screen-sm-min) {
	 
	div.recipes-block { {
		float:none;
		margin-right:10px;
}
}
	
/*___________ featured products ____________________________________________________________*/


@media screen and (max-width: 460px) {
	
  ul.featured-products li {
    float: left;
    width: 33.333%!important;
	text-align:center;
	list-style: none;
  }
}
	
@media screen and (max-width: 970px) {


 ul.featured-products li {
    float: left;
    width: 33.333%!important;
	text-align:center;
	list-style: none;
  }
}