/***** Mobile First *****/

/*Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {	
	/***** Accordion *****/
	.filter-hldr .header,
	.filter-hldr h4 + div,
	.filter-accordion .card-body {
		border-bottom: 1px solid #dee2e6;
	}
	
	/***** Home Page - Hero Carousel *****/
	.hero-carousel .main-img {		
		height: calc(100vh - 60px);
	}
	
	/***** Home Page - Product Snapshot *****/
	.featured div[class^="col"] {
		height: 350px;
	}

	.featured div[class^="col"] > figure {
		position: absolute;
		right: 50px;
		top: 50%;
		-webkit-transform: translate(0, -50%);
		    -ms-transform: translate(0, -50%);
		        transform: translate(0, -50%);
		        display: none;
	}

	.featured div[class^="col"] > figure img {
		max-width: 180px;
		height: auto;
	}
	.featured .content-hldr .content {
		position: absolute;
		top: 50%;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
	}
	
	/***** Home Page - Our History *****/
	.home-history div[class^="col"]:first-child::before {
		content: url(../images/home/our_history_circle_bg.png);
		display: block;
		position: absolute;
		left: -110px;
		top: -35%;
		z-index: -1;
	}
	
	/***** Carousels *****/
	.carousel-product figure + h5 {
		max-width: 250px;
		margin: 0 auto;
	}
	
	/***** Search Sort *****/
	.search-sort > div {
		width: 140px;
		border: 1px solid #dee2e6;
	}
	.search-sort > div select {
		background: url(../images/icons/down_arrow.png) no-repeat right 10px center;
	}
	
	/***** Range Detail *****/
	.cart-card {
		width: 215px;
	}
	
	.checkbox-block .custom-checkbox input + label {
		margin-right: 7px;
	}
	
	/***** Text Carousel *****/
	.carousel-text {
		padding: 0 20px;
		margin: 0 50px;
	}

	/***** FAQ *****/
	.search-hldr .input-group.shadow h1 {
		font-size: 40px;
	}
	.faq-hldr button.close {
		position: relative;
		top: 0;
		background-size: 50%;
	}
	.input-group.shadow .btn::after {
		width: 10px;
		height: 10px;
	}
	.faq-hldr .row > div:first-child .faq-content {
		width: calc(200% + 30px);
		left: 0;
	}
	.faq-hldr .row > div:nth-child(2) .faq-content {
		width: calc(200% + 30px);
		left: calc(-100% - 30px);
	}
	.faq-hldr .row > div:nth-child(n+2) > .faq-content {
		width: calc(200% + 30px);
		left: 0;
	}
	.faq-hldr .row > div:nth-child(2n+2) > .faq-content {
		width: calc(200% + 30px);
		left: calc(-100% - 30px);
	}
	
	/***** Modals *****/
	.modal .input-group {
		height: 73px;
	}
	.modal .input-group input {
		font-size: 20px;
		height: 71px;
	}

	/*three column images*/
	ul.three-column-images
	{
	    display: flex;
	    justify-content: space-evenly;
	    padding: 0 10px;
	}
	ul.three-column-images li a figure {
	    max-width: 240px;
	}
	ul.three-column-images li a figure img {
	    max-width: 100%;
	    height: auto;
	}
	ul.three-column-images li {
	    list-style: none;
	}
	ul.three-column-images li a {
	    padding: 0 10px;
	    display: block;
	}
	/**** RECYCLING ****/
	ul#recyclingTab{
		padding: 0;
	}
	.recycling-head{
		padding:0;
	}
	#recycling{
		margin: 0;
		height: auto;
	}
	.recycling-head p {
	    font-size: 12px;
	}
	
	.links-hldr ul {
		display: flex;
		justify-content: center;
		align-items: center;
	}

}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	
	h2 {
		font-size: 48px;
	}
	h3 {
		font-size: 40px;
	}
	h4 {
		font-size: 32px;
	}
	h5 {
		font-size: 24px;
	}
	h6 {
		font-size: 20px;
	}
	
	/***** One Column Content *****/
	.one-column h2, .one-column h3, .one-column h5, .one-column h6, .one-column p {
		padding: 0 100px;
	}
	.one-column ul {
    	padding: 0 115px;
	}
	
	/***** Home Page - Hero Carousel *****/
	.hero-carousel .main-img {		
		height: auto;
	}
	.navbar-light .navbar-nav .nav-link {
	    color: #16161b;
	    font-size: 17px;
	}
	/***** FAQ *****/
	.search-hldr .input-group.shadow h1 {
		font-size: 48px;
	}
	.faq-hldr .row > div:first-child .faq-content {
		width: calc(300% + 60px);
		left: 0;
	}
	.faq-hldr .row > div:nth-child(2) .faq-content {
		width: calc(300% + 60px);
		left: calc(-100% - 30px);
	}
	.faq-hldr .row > div:nth-child(3) .faq-content {
		width: calc(300% + 60px);
		left: calc(-200% - 60px);
	}
	.faq-hldr .row > div:nth-child(3n+3) .faq-content {
		width: calc(300% + 60px);
		left: calc(-200% - 60px);
	}
	.faq-hldr .row > div:nth-child(3n+4) .faq-content {
		width: calc(300% + 60px);
		left: 0;
	}
	.faq-hldr .row > div:nth-child(3n+5) .faq-content {
		width: calc(300% + 60px);
		left: calc(-100% - 30px);
	}
	.faq-hldr .collapse-btn h6 {
		min-height: 108px;
	}
	
	/***** Home Page - Product Snapshot *****/
	.featured div[class^="col"]:first-child, .featured div[class^="col"]:last-child{
		background-position: center;
    	background-size: 100% 90%;
	}

	.featured .row::before {
		content: "";
		display: block;
		width: 53px;
		height: 100%;
		background: url(../images/home/img_divider.png) no-repeat;
		background-size: cover;
		position: absolute;
		left: 50%;
		top: 0;
		-webkit-transform: translate(-58%, 0);
		    -ms-transform: translate(-58%, 0);
		        transform: translate(-58%, 0);
		z-index: 99;
	}
	.featured div[class^="col"] {
		height: 350px;
	}
	/*.featured div[class^="col"]:first-child {
		background: #f5f5f5 url(../images/home/gorouge_bg3.jpg) no-repeat right -200px top;
	}
	.featured div[class^="col"]:last-child {
		background: url(../images/home/flavour_bg2.png) no-repeat right 0 top 10%, url(../images/home/flavour_bg1.jpg) no-repeat right;
	}*/
	.featured div[class^="col"]:last-child::after {
		content: url(../images/home/flavour_circle_top.png);
		display: block;
		position: absolute;
		right: 0;
		bottom: -98px;
		z-index: 999;
	}
	.featured div[class^="col"] > figure {
		top: inherit;
		right: 20px;
		bottom: 20px;
		-webkit-transform: translate(0, 0);
		    -ms-transform: translate(0, 0);
		        transform: translate(0, 0);
	}
	.featured div[class^="col"] > figure img {
		max-width: 150px;
	}
	.featured .content-hldr {
		position: absolute;
		top: 80px;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 30px;
	}
	.featured .content-hldr .content h2 {
    	font-size: 28px;
	}
	.featured .content-hldr .content {
    	max-width: 200px;
    	top:36%;
	}
	
	/***** Text Carousel *****/
	.carousel-text h2 {
		max-width: 940px;
		margin: 0 auto;
	}
	
	/***** Modals *****/
	.modal .input-group input {
		font-size: 24px;
		padding: 10px 20px;
	}
	
	/***** Recipe Snapshot *****/
	/*.home-recipe-snapshot figure .img-fluid {
		max-width: 164px;
	}*/

	/*three column images*/
	ul.three-column-images
	{
	    display: flex;
	    justify-content: space-evenly;
	    /* position: relative; */
	    padding: 0 100px;
	}
	ul.three-column-images li a figure {
	    max-width: 240px;
	}
	ul.three-column-images li a figure img {
	    max-width: 100%;
	    height: auto;
	}
	ul.three-column-images li {
	    list-style: none;
	}
	ul.three-column-images li a {
	    padding: 0 10px;
	    display: block;
	}
	
	/*RECYCLING */
	ul#recyclingTab{
		padding: 50px 100px;
	}
	.recycling-head{
		padding:0 100px;
	}
	#recycling{
		margin: 0 100px;
		height: auto;
	}
	.recycling-head p {
	    font-size: 14px;
	}
	/*slider*/
	#recyclingTab .nav-link.active {
		opacity: 1;
	}
	#recyclingTab .nav-link {
		opacity: 0.5;
	}
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	/*.container, .container-lg, .container-md, .container-sm, .container-xl {
	    max-width: 1240px;
	}*/
	
	.container.max {
		max-width: 1440px;
	}
	/*Home banner*/
	.hero-carousel .main-img {
    	height: calc(100vh - 68px);
	}
	.navbar-light .navbar-nav .nav-link {
	    color: #16161b;
	    font-size: 20px;
	}
	/***** Home Page - Product Snapshot *****/
	.featured div[class^="col"]:first-child {
		background: #f5f5f5 url(../images/home/loaded_fries_bg.jpg) no-repeat right top;
		background-size: cover;
		background-position: center;
	}
	.featured div[class^="col"]:last-child {
		background: url(../images/home/san_choy_bg.jpg) no-repeat;
		background-size: cover;
		background-position: center;
	}
	.featured div[class^="col"] {
		height: 452px;
	}
	.featured div[class^="col"] > figure {
		top: 50%;
		right: 40px;
		bottom: inherit;
		-webkit-transform: translate(0, -50%);
		    -ms-transform: translate(0, -50%);
		        transform: translate(0, -50%);
	}
	.featured div[class^="col"] > figure img {
		max-width: 180px;
	}
	.featured .content-hldr {
		padding: 60px;
		top:0px;
	}
	.featured .content-hldr .content h2 {
    	font-size: 45px;
    	 min-height:180px;
	}
	.featured .content-hldr .content {
    	max-width: 300px;
    	top:50%;
	}
	.featured .content-hldr .content {
		position: absolute;
		top: 50%;
		-webkit-transform: translate(0, -50%);
		    -ms-transform: translate(0, -50%);
		        transform: translate(0, -50%);
	}
	
	.products-display figure {
		height: 300px;
	}
	/**** RECYCLING ****/
	.recycling-head p {
    	font-size: 18px;
	}
	#recyclingTab figure#productbottle2, #recyclingTab figure#productbottle7 {
    	width: 121px;
	}
	#recyclingTab .nav-link.active {
	    border: transparent;
	    opacity: 1;
	}
	ul.recipie-time li img{
		width:40px;
	}
	ul.recipie-time li {
	    padding: 10px 0;
	}
}

@media (min-width: 1400px) {
	/***** Home Page - Product Snapshot *****/
	
	/***** Carousels *****/
	.carousel-product {
		max-width: 1220px;
		margin: 0 auto;
	}
	
	/***** Carousel - Text *****/
	.carousel-text {
		max-width: 1220px;
		margin: 0 auto;
	}
}

/***** Non-Mobile First *****/

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
	/***** Recipie Carousel *****/
	.white-bg {
		height: 350px;
	}
	.recipie::before, .recipie::after {
		width: 100px;
	}
	.recipie .slick-slide img {
		min-height: auto;
		height: auto;
		max-width: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
	}
	.recipie .slick-prev {
		left: 80px;
	}
	.recipie .slick-next {
		right: 80px;
	}
	.carousel-recipie-hldr .slick-prev {
		left: 80px;
	}
	.carousel-recipie-hldr .slick-next {
		right: 80px;
	}


}

/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
	body {
		margin-top: 60px;
	}
	.main-nav {
		padding: 10px 0;
	}
	.navbar-light .navbar-nav .nav-link {
	    color: #16161b;
	    font-size: 17px;
	}
	.navbar-light .navbar-brand img {
		max-width: 95px;
		height: auto;
	}
	.navbar-light .navbar-toggler-icon {
		background-image: url(../images/icons/hamburger.png);
		background-size: inherit;
		background-position: right;
	}
	/*banner homepage*/
	.hero-carousel .main-img{
		height:auto;
	}
	
	/***** Home Page - Product Snapshot *****/
	.featured div[class^="col"]:first-child {
		background: #f5f5f5 url(../images/home/loaded_fries_bg_mobile.png) no-repeat;
		background-size: cover;
		background-position: center;
		height: 320px;
	}
	.featured .content-hldr .content > img {
		max-width: 240px;
	}
	.featured .content-hldr .content h3 {
		font-size: 40px;
	}
	.featured div[class^="col"]:last-child {
		background-image: url(../images/home/san_choy_bg_mobile.jpg);
		background-repeat: no-repeat, no-repeat;
		background-size: cover;
		background-position: center;
		height: 320px;
	}
	
	/***** Recipie Carousel *****/
	.white-bg {
		height: 330px;
	}
	
	.navbar-nav .dropdown-menu {
		display: block;
	}
	/*recycling slider*/
	.slicker li.nav-item a {
    	opacity: 0.5;
	}
	.slicker li.nav-item a.clicked{
    	opacity: 1;
	}
	.slicker li.nav-item{
		min-height: 245px;
		position: relative;
	}
	.slicker li.nav-item figure{
		position: absolute;
		top:30px;
		left:10px;
	}
	/*navbar sroll*/
	.navbar-collapse {
	    height: calc(100vh - 60px);
	    overflow-y: auto;
	}
	/*one column content*/
	.one-column iframe{
	    width: 100%;
		height: auto;
	}
}

/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    /*.carousel-recipie-hldr, .recipie img {
        max-height: 200px;
    }*/ 
	.navbar-light .navbar-nav .nav-link {
	    color: #16161b;
	    font-size: 20px;
	}
	/*homepagebaner*/
	.hero-carousel .main-img{
		height:auto;
	}
	/***** Buttons *****/
	.btn-xs-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-xs-block,
    input[type="reset"].btn-xs-block,
    input[type="button"].btn-xs-block {
        width: 100%;
    }
    .btn-block + .btn-xs-block,
    .btn-xs-block + .btn-block,
    .btn-xs-block + .btn-xs-block {
        margin-top: 0.5rem;
    }	
	.container {
		padding: 0 26px;
	}
	.filter-hldr .filter {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		z-index: 99999;
		display: none;
	}
	.filter-hldr .filter.in {
		display: block;
	    overflow-y: auto;
    	overflow-x: hidden;
	}
	.filter-hldr .header.top {
		background: #f9f9f9;
	    width: 100vw;
	    margin: 0 -26px;
	    padding: 15px 26px;
	}
	.filter-hldr .header.top a {
		color: #5f5f5f;
	}
	.filter-hldr .header.top a:hover,
	.filter-hldr .header.top a:focus {
		text-decoration: none;
	}
	/***** Accordions *****/
	.filter-accordion .custom-control {
		padding-left: 0;
	}
	.filter-accordion .custom-checkbox .custom-control-label {
		width: 100%;
	}
	.filter-accordion .custom-checkbox .custom-control-label::before,
	.filter-accordion .custom-checkbox .custom-control-label::after {
		left: inherit;
		right: 6px;
	}
	.filter-accordion .card-header {
		border-bottom: 0;
	}
	/***** Search Sort *****/
	.search-sort {
		background: #f9f9f9;
		padding: 8px 0;
		width: 100vw;
	    margin: 0 -26px

	}
	.search-sort > div {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
		width: 50%;
	}
	.search-sort > div.input-group {
		border-right: 1px solid #ccc;
	}
	
	/***** Home Page - Product Snapshot *****/
	.featured div[class^="col"] > figure{
		display: none;
	}
	.featured div[class^="col"] > figure img {
		max-width: 140px;
	}
	.featured .content-hldr {
	    position: absolute;
	    top: 50px;
	    max-width: 190px;
	}
	.featured .btn-lg {
	    font-size: 12px;
	    padding: 6.5px 16px;
	}
	.featured .content-hldr .content h2{
		font-size: 20px;
		line-height: 26px;
	}
	/***** Home Our History *****/
	.home-history .content {
	}
	.home-history .content h4 {
		font-size: 32px;
		text-transform: uppercase;
	}
	
	/***** Time Info *****/
	.time-info figure {
		width: 42px;
		text-align: center;
	}
	.time-info figure + div {
		width: 95px;
	}
	.time-info figure img {
		max-width: 42px;
	}
	.time-info figure + div h6 {
		font-size: 14px;
	}
	.time-info figure + div h2 {
		font-size: 32px;
	}
	.time-info-hldr .time-info:last-child figure img {
		max-width: 32px;
	}
	
	/***** Recipie Carousel *****/
	.white-bg {
		height: 310px;
	}
	.recipie::before, .recipie::after {
		width: 40px;
	}
	.recipie .slick-slide img {
		min-height: auto;
		height: auto;
		max-width:100%;
	}
	.recipie .slick-prev {
		left: 20px;
	}
	.recipie .slick-next {
		right: 20px;
	}
	.carousel-recipie-hldr .slick-prev {
		left: 20px;
	}
	.carousel-recipie-hldr .slick-next {
		right: 20px;
	}
	
	/***** Text Carousel *****/
	.carousel-text h2 {
		padding: 0 26px;
	}
	
	/***** FAQ Search *****/
	.search-hldr .input-group.shadow button.btn {
		text-indent: -20000px;
		padding: 0 10px;
	}
	.search-hldr .input-group.shadow button.btn-primary {
		background-color: transparent;
		border-color: transparent;
	}
	.search-hldr .input-group.shadow button.btn::after {
		width: 14px;
		height: 14px;
		display: block;
		position: absolute;
		border-color: #a8002c;
		top: 50%;
		-webkit-transform: rotate(45deg) translate(0, -50%);
		    -ms-transform: rotate(45deg) translate(0, -50%);
		        transform: rotate(45deg) translate(0, -50%);
	}
	.search-hldr .btn-link {
		font-size: 16px;
	}
	.search-hldr .btn-link::after {
		display: none;
	}
	/***** One Column Content *****/
	.one-column ul {
    	padding: 0 20px;
	}
	
	/****** three column images *****/
	ul.three-column-images li figure img {
	    width: 100%;
	    height: auto;
	}
	ul.three-column-images {
	    list-style: none;
	    padding-left: 0;
	}

	/***** recycling *****/
	ul#recyclingTab{
		padding: 0;
	}
	.recycling-head{
		padding:0;
	}
	#recycling{
		margin: 0;
		height: auto;
	}
	.recycling-head p {
	    font-size: 12px;
	}
	/*recycling slider*/
	.slicker li.nav-item a {
    	opacity: 0.5;
	}
	.slicker li.nav-item a.clicked{
    	opacity: 1;
	}
	
	/*products display*/
	.products-display figure {
    	height: auto;
	}
    /*10/11*/
    .recipe-hldr {
        margin: auto;
    }
}

/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {

}

/*Extra large devices (large desktops)
No media query since the extra-large breakpoint has no upper bound on its width*/