html,
body {
	font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
	background: #fff;
	color: #000;
	scroll-behavior: smooth;
	padding: 0;
	margin: 0;
}

a {
	color: inherit;
}

a:link, a:visited, a:hover {
	text-decoration: none;
}

video {
  object-fit: cover;
  width: 100dvw;
  height: 100dvh;
  top: 0;
  left: 0;
}

.hidden {
	opacity: 0;
	filter: blur(5px);
	-webkit-transform: translatex(-100%);
	   -moz-transform: translatex(-100%);
	    -ms-transform: translatex(-100%);
	     -o-transform: translatex(-100%);
	        transform: translatex(-100%);
	transition: all 1s;
}

.show {
	opacity:1;
	filter: blur(0);
	-webkit-transform: translatex(0);
	   -moz-transform: translatex(0);
	    -ms-transform: translatex(0);
	     -o-transform: translatex(0);
	        transform: translatex(0);
}

.mobile {
	display: none !important;
}

.desktop {
	display: flex !important;
}

@media (max-width: 1024px) {
  
}

@media (max-width: 768px) {
	.mobile {
		display: flex !important;
	}

	.desktop {
		display: none !important;
	}
}

@media (max-width: 600px) {

}

.body-wrap {
	min-height: 100dvh;
}

.content-wrap {
	margin: 0 15px;
}

.content-wrap-sml {
	margin: 0 auto;
	padding: 0 15px;
	max-width: 88%;
}

.main-btn {
	max-width: 12%;
	padding: 0.5rem ;
	font-size: 0.8rem;
	display: block;
	color: #fff;
	background: #CE0303;
	text-align: center;
	-webkit-border-radius: 20%;
	border-radius: 50rem;
	border 1px solid #CE0303;
	-webkit-transition: 0.2s;
	   -moz-transition: 0.2s;
	    -ms-transition: 0.2s;
	     -o-transition: 0.2s;
	        transition: 0.2s;
}

.main-btn:hover {
	color: #CE0303;
	background: #FFF;
	border: 1px solid #CE0303;
}

.main-btn2 {
	width: auto;
	padding: 0.5rem ;
	font-size: 0.8rem;
	display: block;
	color: #CE0303;
	background: #fff;
	text-align: center;
	-webkit-border-radius: 20%;
	border-radius: 50rem;
	-webkit-transition: 0.2s;
	   -moz-transition: 0.2s;
	    -ms-transition: 0.2s;
	     -o-transition: 0.2s;
	        transition: 0.2s;
}

.main-btn3 {
	min-width: 181px;
	width: 50%;
	padding: 0.5rem;
	font-size: 0.8rem;
	font-size: 0.8vw;
	display: block;
	color: #CE0303;
	background: #fff;
	text-align: center;
	-webkit-border-radius: 20%;
	border-radius: 50rem;
	-webkit-transition: 0.2s;
	   -moz-transition: 0.2s;
	    -ms-transition: 0.2s;
	     -o-transition: 0.2s;
	        transition: 0.2s;
}

.main-btn2:hover,
.main-btn3:hover {
	font-weight: bold;
	background: #CE0303;
	color: #fff;
}

/*------------header-----------*/
.header {
	position: fixed;
	width: 100%;
	z-index: 4;
}

.header.active {
	background: #E72330;
}

.header .content-wrap {
	position: relative;
	z-index: 4;
}

.header .logo {
	width: 6%;
	-webkit-transition: 0.2s;
	   -moz-transition: 0.2s;
	    -ms-transition: 0.2s;
	     -o-transition: 0.2s;
	        transition: 0.2s;
}

.header .logo.mainlogo {
	opacity:0
}

.header.active .logo {
	width: 4%;
}

.header.active .logo.mainlogo {
	opacity: 1;
}

.main-nav {
	position: relative;
	font-size: 1.1vw;
}

.main-nav ul {
	list-style: none;
	margin-bottom: 0;
}

.main-nav ul li {
	margin: 0 0 0 1vw;
}

.main-nav a {
	padding: 20px 10px;
	color: #fff;
}

.main-nav a.active,
.main-nav a:hover {
	color: #FD0;
}

.burger-menu {
	background-repeat: no-repeat;
	background-image: url("../images/burger.svg");
	aspect-ratio: 1/.8;
	width: 31px;
	/* border: 1px solid; */
	margin: 10px 0;
}

.header.active .nav-dropdown {
	padding: 60px 15px 10px;
}

.nav-dropdown-wrap {
	display: none;
	position: absolute;
	z-index: 3;
	top: 0;
	overflow: hidden;
}

.nav-dropdown {
	display: flex;
	padding: 90px 15px 10px;
	-webkit-justify-content:center;
	        justify-content:center;
	width: 100%;
	background: rgb(163,25,34);
	background: linear-gradient(0deg, rgba(163,25,34,1) 3%, rgba(231,35,48,1) 65%);
}

.nav-dropdown .box {
	width: 10%;
	margin: 0 2%;
}

.nav-dropdown  .product-img {
	padding: 10px;
}

.nav-dropdown h4 {
	color: #fff;
	font-size: .8rem;
	text-align: center;
}

@media (max-width: 1024px) {
  
}

@media (max-width: 768px) {
	.header .logo {
		width: 60px;
	}

	.main-btn {
		max-width: 130px;
	}
}

@media (max-width: 600px) {
	

	.header .logo.mainlogo {
		opacity:0
	}

	.header.active .logo {
		width: 40px;
	}
}

/*------------slide menu-----------*/
.slider-menu {
	position: fixed;
	width: 100%;
	height: 100dvh;
	z-index: 5;
	display: none;
	justify-content: flex-end;
}


.slider-menu nav {
	background: #E72330;
	height: 100%;
	width: 80%;
	position: relative;
	color: #fff;
	padding: 20% 10% 10%;
  box-shadow: -10px 0 10px rgba(0,0,0,.2);
}

.slider-menu nav > ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.slider-menu nav > ul > li {
	margin: 0 0 15px;
}

.slider-menu nav > ul > li.dropdown > .arrow {
	background-image: url(../images/arrow.svg);
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 12px;
	aspect-ratio: 1/.6;
	display: inline-block;
	margin: 0 7px 3px;
}

.slider-menu nav > ul > li.dropdown > .arrow.active {
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	     -o-transform: rotate(180deg);
	        transform: rotate(180deg);
}

.slider-menu nav > ul > li.dropdown > ul {
	display: none;
}

.slider-menu nav > ul > li > ul >li {
	
}

.slider-menu nav > ul >li > a {
	
}

.slider-menu nav > ul >li > a.active {
	color: #FD0;
}

.slider-menu nav > ul > li {
}

.slider-menu nav > ul > li > ul  {
	list-style-type: none;
	padding: 0 0 0 18px;
}

.slider-menu nav > ul > li > ul > li  {
	margin: 7px 0 0;
}

.slider-menu nav > ul > li > ul > li > a {
	
}

.slider-menu nav > ul > li > ul > li > a.active {
	color: #FD0;
}

.close {
	background-color: transparent;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	background-image: url(../images/x.svg);
	width: 20px;
	height: 20px;
	display: block;
	position: absolute;
	top: 20px;
	right: 20px;
	border: none;
}

.slider {
	right:-80%;
}


/*----------mainpage-----------*/
.main-section1 {
	width: 100%;
	min-height: 100dvh;
	background-color: #E72330;
	background-image: url(../images/pattern-bg1.png);
	background-repeat: repeat;
	position: relative;
	display: flex;
	align-items: center;
}

.main-section1 .font-wrap {
	position: relative;
	/* bottom: 30%; */
	width: 40%;
	margin: 0 0 0 5%;
	display: flex;
	flex-direction: row;
	opacity: 0;
}

.main-section1 .font-wrap.show {
	opacity: 1;
	animation-name: show-up;
  animation-duration: 1s;
  animation-timing-function: ease-out	; 
}

.main-section1 .font-wrap .flex-wrap{
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

.main-section1 .font-wrap .mainlogo {
	width: 16vw;
	display: block;
	margin: 1rem;
}

@keyframes show-up {
  0% {opacity:0;}
  100% {opacity:1;}
}

.main-section1 .font-wrap h2 {
	color: #FD0;
	text-transform: uppercase;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 6.6vw;
	line-height: 6.6vw;
}

.main-section1 .products-wrap {
	position: relative;
	width: 50%;
	height: 100vh;
	display: block;
}

.main-section1 .products-wrap > * {
	background-repeat: no-repeat;
	background-size: contain;
}

.main-section1 .products-wrap .bite{
	background-size: contain;
	background-image: url(../images/products/bites/bites-chocolate.png);
	width: 21%;
	transform: rotate(-14deg);
	height: auto;
	position:absolute;
	aspect-ratio: 1/1.7;
	bottom: 18%;
	left: 12%;
  animation-name: bites-move-up;
  animation-duration: 2s;
  animation-timing-function: ease-out	; 
}

.main-section1 .products-wrap .potato-crisp{
	background-image: url(../images/products/potato_crisp/potato-crisps-original.png);
	width: 22%;
	transform: rotate(11deg);
	height: auto;
	bottom: 23%;
	left: 49%;
	position:absolute;
	aspect-ratio: 1/2.9;
	animation-name: potato-crisp-move-up;
  animation-duration: 2s;
  animation-timing-function: ease-out	; 
}

.main-section1 .products-wrap .ebiya{
	background-size: contain;
	background-image: url(../images/products/ebiya/ebiya.png);
	width: 35%;
	transform: rotate(-8deg);
	height: auto;
	position:absolute;
	aspect-ratio: 1/1.2;
	bottom: 35%;
	left: 21%;
	animation-name: ebiya-move-up;
  animation-duration: 2s;
  animation-timing-function: ease-out	; 
}

.main-section1 .products-wrap .fries{
	background-image: url(../images/products/crispy_fries/fries-original.png);
	width: 45%;
	transform: rotate(8deg);
	height: auto;
	position:absolute;
	aspect-ratio: 1/1;
	left: 43%;
	bottom: 2%;
	animation-name: fries-move-up;
  animation-duration: 2s;
  animation-timing-function: ease-out	; 
}

@keyframes bites-move-up {
  0% {opacity:0; bottom:0%}
  40% {opacity:1; bottom:18%}
  100% {opacity:1;bottom:18%}
}

@keyframes potato-crisp-move-up {
	0% {opacity:0; bottom:7%}
  10% {opacity:0; bottom:7%}
  50% {opacity:1; bottom:23%}
  100% {opacity:1;bottom:23%}
}

@keyframes ebiya-move-up {
	0% {opacity:0; bottom:28%}
  20% {opacity:0; bottom:28%}
  60% {opacity:1; bottom:35%}
  100% {opacity:1;bottom:35%}
}

@keyframes fries-move-up {
	0% {opacity:0; bottom:-6%}
  30% {opacity:0; bottom:-6%}
  70% {opacity:1; bottom:2%}
  100% {opacity:1;bottom:2%}
}

.main-section2 {
	/* min-height: 79dvh; */
	background: #F9C832;
	position: relative;
}

.main-section2 .topwave {
	position: absolute;
	aspect-ratio: 1/0.11;
	background-position: 10% 0;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: 100%;
	background-image: url(../images/svg/section2-top.svg);
	width: 100%;
	top: -10%;
}

.main-section2 .content {
	background-image: url(../images/mychef-section2-bg2a.png);
	background-position: center bottom;
	width: 100%;
	height: auto;
	top: -5px;
	position: relative;
	/* min-height: 100vh; */
	background-size: cover;
	display: block;
	padding-bottom: 15vh;
}

.main-section2 .content:before {
	content: "";
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	height: 10vh;
	background: rgb(249,200,50);
	background: linear-gradient(0deg, rgba(249,200,50,0) 16%, rgba(249,200,50,1) 85%);
}

.main-section2 .content-wrap-sml {
	position: relative;
	z-index: 3;
}

.main-section2 .box.box-50 {
	width: 50%;
}

.main-section2 .box {
	width: 30%;
	margin-bottom: 3rem;
	cursor: pointer;
}

.main-section2 .box.box-3 {
	width: 26%;
}

.main-section2 .box.box-50 .product-img{
	padding: 0 20%;
}

.main-section2 .box .product-img {
	padding: 0 10%;
}


.main-section2 .box .product-img img {
	margin: 0 auto;
	display: block;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
	-webkit-transition: 0.2s;
	   -moz-transition: 0.2s;
	    -ms-transition: 0.2s;
	     -o-transition: 0.2s;
	        transition: 0.2s;
}

.main-section2 .box .product-img:hover img {
	-webkit-transform: scale(1.05);
	   -moz-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	     -o-transform: scale(1.05);
	        transform: scale(1.05);
}


.main-section2 .box h3 {
	text-align: center;
	font-size: 1.2rem;
	font-size: 1.2vw;
	margin-top: .2vw;
}

.main-section3 {
	min-height: 100dvh;
	background: #DFDFDF;
	position: relative;
}

.main-section3 .topwave {
	position: absolute;
	background-position: top center;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	background-image: url(../images/svg/section3-top.svg);
	height: 15%;
	min-width: 100%;
	top: -13%;
	z-index: 2;
}

.main-section3 .content {
	position: relative;
	z-index: 3;
}

.main-section4 {
	min-height: 100dvh;
	background: #fff;
	position: relative;
}

.main-section4 .topwave {
	position: absolute;
	background-position: top center;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	background-image: url(../images/svg/section4-top.svg);
	height: 8%;
	width: 100%;
	top: -7%;
}

.main-section4 .content {
	position: relative;
	z-index: 3;
}

.section-title {
	color: #E72330;
	text-transform: uppercase;
	font-size: 2.8vw;
	font-family: "Bebas Neue", sans-serif;
}

.activity-wrap {
	
}

.activity-wrap .box {
	width: 30%;
	margin: 2% 1.6%;
}

.activity-wrap .box .thumbnail {
	overflow: hidden;
	display: flex;
	align-items: center;
	cursor: pointer;
	aspect-ratio: 1/.58;
}

.activity-wrap .box .thumbnail img {
	-webkit-transition: 0.2s;
	   -moz-transition: 0.2s;
	    -ms-transition: 0.2s;
	     -o-transition: 0.2s;
	        transition: 0.2s;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

.activity-wrap .box .thumbnail:hover img {
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}

.activity-wrap .box .title {
	display: block;
	font-weight: 600;
	font-size: 1.1rem;
	font-size: 1.3vw;
	padding: 0.8rem 0;
	line-height: 1.4rem;
}

.activity-wrap .box .date {
	display: inline-block;
	color: #E72330;
	font-size: 0.8rem;
	font-size: 0.9vw;
}

.activity-wrap .box .date:before {
	content: "";
	display: block;
	height: 2px;
	width: 100%;
	background: red;
	margin-bottom: 0.3rem;
}

.video-wrap {
	display: flex;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
}

.video-wrap .main-video {
	width: 74%;
	 display: flex;
  justify-content: center;
}

.video-wrap .main-video iframe {
    aspect-ratio: 40 / 23;
    width: 100% !important;
}

.video-thumb {
	width: 24%;
	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
}

.video-thumb .box {
	width: 100%;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	-webkit-border-radius: 2%;
	        border-radius: 2%;
}

.video-thumb .box:not(:first-child) {
	margin: 5% 0 0;
}

.video-thumb .box:hover:after,
.video-thumb .box.active:after {
	position: absolute;
	width: 100%;
	border: 4px solid #FD0;
	aspect-ratio: 1/.56;
	/* background: red; */
	content: "";
	top: 0;
}

.video-thumb .box img{
	width: 100%;
	height: atuo;
	display: block;
}

@media (max-width: 1024px) {
  
}

@media (max-width: 768px) {
	.main-section1 {
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	.main-section1 .font-wrap {
		position: relative;
		bottom: 0;
		width: 100%;
/*		aspect-ratio: 1;*/
		padding: 14% 8% 5%;
		margin: 0 auto;
	}

	.main-section1 .font-wrap .flex-wrap{
		
	}

	.main-section1 .font-wrap .mainlogo {
		width: 59%;
		display: block;
		margin: 1rem auto;
	}

	.main-section1 .font-wrap h2 {
		color: #FD0;
		text-transform: uppercase;
		font-family: "Bebas Neue", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 4rem;
		line-height: 4rem;
		text-align: center;
	}

	.main-section1 .products-wrap {
		width: 100%;
		aspect-ratio: 1/1.1;
		height: auto;
		margin-left: 0;
		overflow: hidden;
	}

	.main-section1 .products-wrap > * {
		background-repeat: no-repeat;
		background-size: contain;
	}

	.main-section1 .products-wrap .bite{
		background-size: contain;
		width: 36%;
		transform: rotate(-14deg);
		height: auto;
		position:absolute;
		aspect-ratio: 1/1.7;
		bottom: 0%;
		left: 5%;
		animation-name: bites-move-up ;
	  animation-duration: 2s;
	  animation-timing-function: ease-out	; 
	}

	.main-section1 .products-wrap .potato-crisp{
		width: 29%;
		transform: rotate(11deg);
		height: auto;
		bottom: 23%;
		left: 58%;
		position:absolute;
		aspect-ratio: 1/2.9;
		animation-name: potato-crisp-move-up;
	  animation-duration: 2s;
	  animation-timing-function: ease-out	; 
	}

	.main-section1 .products-wrap .ebiya{
		background-size: contain;
		width: 51%;
		transform: rotate(-8deg);
		height: auto;
		position:absolute;
		aspect-ratio: 1/1.2;
		bottom: 30%;
		left: 13%;
		animation-name: ebiya-move-up;
	  animation-duration: 2s;
	  animation-timing-function: ease-out	; 
	}

	.main-section1 .products-wrap .fries{
		width: 57%;
		transform: rotate(8deg);
		height: auto;
		position:absolute;
		aspect-ratio: 1/1;
		bottom: -13%;
		animation-name: fries-move-up;
	  animation-duration: 2s;
	  animation-timing-function: ease-out	; 
	}

	@keyframes bites-move-up {
	  0% {opacity:0; bottom:-18%}
	  40% {opacity:0; bottom:-18%}
	  100% {opacity:1;bottom:0%}
	}

	@keyframes potato-crisp-move-up {
		0% {opacity:0; bottom:7%}
	  10% {opacity:0; bottom:7%}
	  50% {opacity:1; bottom:23%}
	  100% {opacity:1;bottom:23%}
	}

	@keyframes ebiya-move-up {
		0% {opacity:0; bottom:23%}
	  20% {opacity:0; bottom:23%}
	  60% {opacity:1; bottom:30%}
	  100% {opacity:1;bottom:30%}
	}

	@keyframes fries-move-up {
		0% {opacity:0; bottom:-23%}
	  30% {opacity:0; bottom:-23%}
	  70% {opacity:1; bottom:-13%}
	  100% {opacity:1;bottom:-13%}
	}

	.main-section2 .topwave {
		top: -5%;
	}

	.main-section2 .box.box-3 {
		width: 50%;
	}

	.main-section2 .box.box-50 .product-img{
		padding: 0 20%;
	}

	.main-section2 .box .product-img {
		padding: 0 10%;
	}

	.main-section2 .box .product-img img {
		margin: 0 auto;
		display: block;
	}

	.main-section2 .box h3 {
		font-size: 1rem;
	}

	.main-section3 {
		min-height: auto;
		height: auto;
		display: block;
		padding-bottom: 150px;
	}

	.video-wrap {
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-direction: column;
	}

	.video-wrap .main-video {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.video-wrap .main-video iframe {
	    aspect-ratio: 40 / 23;
	    width: 100% !important;
	}

	.video-thumb {
		width: 100%;
		padding: 10px 0;
		display: flex;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: flex-start;
		justify-content: space-between;
	}

	.video-thumb .box {
		width: 32%;
		overflow: hidden;
		-webkit-border-radius: 2%;
		border-radius: 2%;
	}

	.video-thumb .box:not(:first-child) {
		margin: 0 0 0;
	}

	.video-thumb .box img{
		width: 100%;
		height: atuo;
		display: block;
	}

	.main-section4 {
		min-height: 100dvh;
		background: #fff;
		position: relative;
	}

	.main-section4 .topwave {
		position: absolute;
		aspect-ratio: 1/0.07;
		background-position: top right;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-size: 180%;
		background-image: url(../images/svg/section4-top.svg);
		width: 100%;
		height: auto;
		top: -1.1%;
	}

	.main-section4 .content {
		position: relative;
		z-index: 3;
	}

	.section-title {
		color: #E72330;
		text-transform: uppercase;
		font-size: 2.5rem;
		font-family: "Bebas Neue", sans-serif;
	}

	.activity-wrap {
		
	}

	.activity-wrap .box {
		width: 100%;
		margin: 2% auto 4%;
	}

	.activity-wrap .box .thumbnail {
		
	}

	.activity-wrap .box .thumbnail img {
		
	}

	.activity-wrap .box .title {
		display: block;
		font-weight: 600;
		font-size: 1.1rem;
		padding: 0.8rem 0;
		line-height: 1.4rem;
	}

	.activity-wrap .box .date {
		display: inline-block;
		color: #E72330;
		font-size: 0.8rem;
	}

	.activity-wrap .box .date:before {
		content: "";
		display: block;
		height: 2px;
		width: 100%;
		background: red;
		margin-bottom: 0.3rem;
	}

	footer {
		font-size: 0.9rem !important;
	}

	footer .title {
		font-size: 1.5rem !important;
	}
}

@media (max-width: 600px) {
	.main-section1 .font-wrap .flex-wrap{
		margin: 0 auto;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-justify-content: center;
		        justify-content: center;	
	}
}

/*----------products-----------*/
.product-head {
  min-height: 100vh;
  background-color: #E72330;
  background-image: url(../images/pattern-bg1.png);
  background-blend-mode: multiply;
  background-repeat: repeat;
  position: relative;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
}

.product-head#ebiya {
	background-image: url(../images/products/ebiya/ebiya-bg.jpg);
}

.product-head#bites {

	background-image: url(../images/products/bites/bites-bg.png);
}

.product-head#world_juice {
	background-color: transparent;
	background-image: url(../images/products/juice/world_juice_bg_desktop.jpg);
}

.product-head#garden {
	background-color: transparent;
	background-image: url(../images/products/garden/garden-bg.jpg);
}

.product-info-wrap {
	order:1;
	/* padding-top: 5rem; */
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 30%;
}

.product-info-wrap .product-logo-main {
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	padding-bottom: 20px;
}

.product-info-wrap .product-logo-main h4 {
	color: #FFDD00;
	text-transform: uppercase;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.2vw;
	line-height: 2.2vw;
	margin-bottom: 0;
}

.product-info-wrap .product-logo {
	width: 40%;
	margin: 0 1rem 0 0;
}

.product-info-wrap .product-info {
	
}

.product-info-wrap .product-info p {
	color: #fff;
	font-size: 1.1vw;
}

.product-info-wrap .product-btn-wrap {
	margin-top: 20px;
}

.product-item-image-wrap {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0 40px;
	width: 40%;
	order:2;
}

.product-item-image {
	width: 100%;
	animation-name: product-show-up;
  animation-duration: 1s;
  animation-timing-function: ease-out	; 
}

@keyframes product-show-up {
  0% {opacity:0; margin-top:10%}
  100% {opacity:1; margin-top:0%}
}




.product-items {
	padding: 80px 0 160px;
}

.product-items h3 {
	color: #E72330;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	padding-bottom: 2rem;
	font-size: 2vw;
}

.product-items .box-wrap{
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
}

.product-items .box-wrap .box {
	display: flex;
	width: 23%;
	margin: 0 22px 15px 0 ;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	cursor: pointer;
}

.product-items .box .img-wrap {
	background: #F1F1F1;
	aspect-ratio: 1;
	padding: 15px;
	display: flex;
	-webkit-align-items: center;
	        align-items: center;
	-webkit-justify-content: center;
	        justify-content: center;
}

.product-items .box .img-wrap img {
	margin: 0 auto;
	width: 30%;
	height: auto;
	-webkit-transition: 0.2s;
	   -moz-transition: 0.2s;
	    -ms-transition: 0.2s;
	     -o-transition: 0.2s;
	        transition: 0.2s;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

.product-items .box:hover .img-wrap img {
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}

.product-items .box h4 {
	text-align: center;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-size: 1.2vw;
	padding: 0.5rem 0;
}

@media (max-width: 1024px) {
  
}

@media (max-width: 768px) {
	.product-head {
		padding: 0 15%;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.product-head#ebiya {
		background-image: url(../images/products/ebiya/ebiya-bg-mobile.jpg);
		-webkit-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}

	.product-head#world_juice {
		background-image: url(../images/products/juice/world_juice_bg_mobile.jpg);
	}

	.product-head#garden {
		background-image: url(../images/products/garden/garden-bg-mobile.jpg);
	}

	.product-info-wrap {
		order:2;
		padding-top: 1rem;
		display: flex;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		margin-bottom: 2rem;
	}

	.product-info-wrap .product-logo {
		width: 25%;
		margin: 0 5px 0 0;
	}

	.product-info-wrap .product-info {
		
	}

	.product-info-wrap .product-logo-main h4 {
		font-size: 2rem !important;
		line-height: 2rem !important;
	}

	.product-info-wrap .product-info p {
		color: #fff;
		font-size: 1rem !important;
	}

	.product-info-wrap .product-btn-wrap {
		margin: 30px auto 10px;
		display: block;
	}

	.product-item-image-wrap {
	  display: flex;
	  order:1;
	  flex-direction: column;
	  justify-content: flex-end;
	  margin: 0 auto;
	  width: 100%;
	  display: flex;
	  -webkit-justify-content: flex-start;
	  justify-content: flex-start;
	}
}

@media (max-width: 600px) {

	.product-head {
		padding: 70px 25px 0;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.product-info-wrap {
		order:2;
		padding-top: 1rem;
		display: flex;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		margin-bottom: 2rem;
	}

	.product-info-wrap .product-logo {
		width: 25%;
		margin: 0 5px 0 0;
	}

	.product-info-wrap .product-info {
		
	}

	.product-info-wrap .product-logo-main h4 {
		font-size: 2rem !important;
		line-height: 2rem !important;
	}

	.product-info-wrap .product-info p {
		color: #fff;
		font-size: 1rem !important;
	}

	.product-info-wrap .product-btn-wrap {
		margin: 30px auto 10px;
		display: block;
	}

	.product-item-image-wrap {
	  display: flex;
	  order:1;
	  flex-direction: column;
	  justify-content: flex-end;
	  margin: 0 auto;
	  width: 100%;
	  display: flex;
	  -webkit-justify-content: flex-start;
	  justify-content: flex-start;
	}

	.product-item-image-wrap .product-logo-wrap {
		display: flex;
		-webkit-align-items: center;
		        align-items: center;
		-webkit-justify-content: flex-start;
		        justify-content: flex-start;
	}

	.product-item-image-wrap .product-logo-wrap span {
		width: 110px;
		margin: 0 15px 0 0;
	}

	.product-item-image-wrap .product-logo-wrap h4{
		color: #FFDD00;
		text-transform: uppercase;
		font-family: "Bebas Neue", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 1.5rem;
		line-height: 1.5rem;
	}

	.product-item-image {
		width: 100%;
	}

	.product-items {
		padding: 80px 0 160px;
	}

	.product-items h3 {
		
	  font-size: 2rem !important;
	  padding-bottom: 2rem;
	}

	.product-items .box-wrap{
		display: flex;
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
		-webkit-justify-content: flex-start;
		        justify-content: flex-start;
	}

	.product-items .box-wrap .box {
		display: flex;
		width: 47%;
		margin: 0;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.product-items .box-wrap .box:nth-child(even) {
		margin: 0px 0 0 6%;
	}

	.product-items .box .img-wrap {
		background: #F1F1F1;
		aspect-ratio: 1;
		padding: 15px;
		display: flex;
		-webkit-align-items: center;
		        align-items: center;
		-webkit-justify-content: center;
		        justify-content: center;
	}

	.product-items .box .img-wrap img {
		margin: 0 auto;
		width: 30%;
		height: auto;
	}

	.product-items .box h4 {
		text-align: center;
		font-family: "Lato", sans-serif;
	  font-weight: 400;
	  font-size: 1rem;
	  padding: 0.5rem 0;
	}
}

/*----------sub pages-----------*/
.subpage-head {
	height: 220px;
	width: 100%;
	background: rgb(173,26,36);
	background: linear-gradient(0deg, rgba(173,26,36,1) 0%, rgba(231,35,48,1) 100%);
}

.subpage-content-wrap  {
	
}

.subpage-content {
	max-width: 62vw;
	margin: -120px auto 0;
	padding: 40px 50px 80px;
	background: #fff;
	min-height: 50vh;
}

.sub-content-title {
	font-weight: bold;
	font-size: 2vw;
}

.subpage-content p {
	text-indent: 2vw;
	font-size: 1.1vw;
}

.subpage-content .sub-title {
	color: #E72330;
	text-transform: uppercase;
	text-align: center;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.5rem;
	font-size: 2.8vw;
}

.subpage-content img {
	width: 100%;
	height: auto;
	display: block;
	padding: 1vw 0;
}

.subpage-content .activity-wrap .box {
	
}

.subpage-content .activity-wrap .box .thumbnail {
	width: 100%;
}

.actpage-header {
	display: flex;
	padding: 0 0 15px;
	-webkit-align-items: center;
	        align-items: center;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
}

.actpage-header .link {
	color: #000;
	opacity: .3;
	font-size: .6rem;
	font-size: .7vw;
}

.actpage-header .date {
	display: block;
	color: #E72330;
	font-size: .8rem;
	font-size: .9vw;
}

.actpage-header .date:after {
	display: block;
	content: "";
	margin: 4px 0 0;
	width: 100%;
	height: 2px;
	background: #E72330;
}

@media (max-width: 1024px) {
  
}

@media (max-width: 768px) {
	
}

@media (max-width: 600px) {
	.subpage-head {
		height: 135px;
	}

	.subpage-content .sub-title {
		font-size: 2.5rem !important;
	}

	.subpage-content {
		max-width: 100%;
		margin: -53px 20px 0;
		padding: 14px 10px 80px;
	}

	.sub-content-title {
		font-size: 1.5rem !important;
	}

	.subpage-content p {
		font-size: 1rem !important;
	}

	.subpage-content img {
		padding: 15px 0;
	}

	.actpage-header .link {
		font-size: 0.6rem;
	}

	.actpage-header .date {
		font-size: 0.8rem;
	}
}

/*------------footer-----------*/
footer {
	min-height: 200px;
	color: #fff;
	background: #E72330;
	padding: 50px 0;
	text-transform: uppercase;
	font-size: 0.9rem;
	font-size: 1vw;
}

footer .title {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.6vw;
}

footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

footer ul.f-site  > li{
	-webkit-transition: 0.2s;
	   -moz-transition: 0.2s;
	    -ms-transition: 0.2s;
	     -o-transition: 0.2s;
	        transition: 0.2s;
}

footer ul.f-site > li:hover {
	color: #FD0;
}

footer ul > li > ul {
	padding-top: 0.2rem;
}

footer ul > li > ul > li {
	font-size: 0.8em;
	font-size: 0.8vw;
	-webkit-transition: 0.2s;
	   -moz-transition: 0.2s;
	    -ms-transition: 0.2s;
	     -o-transition: 0.2s;
	        transition: 0.2s;
}

footer ul > li > ul > li:hover {
	color: #FD0;
}

footer .icon {
	width: 20px;
	height: 20px;
	padding: 4px;
	margin: 0 1px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

footer .icon img {
	width: 100%;
	display: block;
	height: auto;
	align-self: center;
}

footer .footer-logo {
	width: 50px;
	padding: 0 10px 0 0;
}

footer .coop {
	text-transform: none;
	letter-spacing: 0.1rem;
	padding-top: 50px;
	font-weight: 400;
	font-size: 0.7rem;
	text-align: center;
/*	font-family: "Bebas Neue", sans-serif;*/
}

@media (max-width: 1440px) {
	.main-btn3 {
		font-size: 0.8rem;
	}

	.header.active .logo {
		width: 55px;
	}

  .main-nav {
  	font-size: 1rem;
  }

  .subpage-content {
  	max-width: 800px;
  }

  .subpage-content .sub-title {
  	font-size: 2.5rem;
  }

  .subpage-content p {
  	font-size: 1rem;
  }

  .activity-wrap .box .title {
  	font-size: 1.1rem;
  }

  .activity-wrap .box .date {
  	font-size: 0.8rem;
  }

  .actpage-header .link {
  	font-size: 0.6rem;
  }

  .actpage-header .date {
  	font-size: 0.8rem;
  }

  .product-info-wrap .product-logo-main h4 {
  	font-size: 2rem;
  	line-height: 2rem;
  }

  .product-info-wrap .product-info p {
  	font-size: 1rem;
  }

  .product-items h3 {
  	font-size: 2rem;
  }

  .product-items .box h4 {
  	font-size: 1.1rem;
  }

  footer {
  	font-size: 0.9rem;
  }

  footer .title {
  	font-size: 1.5rem;
  }

  footer ul > li > ul > li {
  	font-size: 0.7rem;
  }
}

@media (max-width: 1024px) {
  
}

@media (max-width: 768px) {
	
}

@media (max-width: 600px) {

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.main-section1 {
		max-height: 40dvh;
		min-height: auto;
	}

	.main-section1 .font-wrap .mainlogo {
		width: 16dvw;
	}

	.main-section1 .font-wrap .flex-wrap {
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		margin: 0 50px 50px 0;
	}

	.main-section1 .products-wrap {
	height: 40vh;
	}

	.main-section2 .content {
		padding-bottom: 5dvh;
	}

	.main-section3 {
		min-height: 45dvh;
	}

	.main-section4 {
		min-height: 45dvh;
	}

	.product-head {
		min-height: 50dvh;
	}

	.product-info-wrap {
		width: 50%;
	}

	.product-item-image-wrap {
		width: 35%;
	}
}