html, body {
	position: relative;
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

html::-webkit-scrollbar {
		    width: 0em;
		}

body {
	color: #333;
	margin: 0;
	padding: 0px;
	box-sizing: border-box;
	/*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;*/
	font-family: "Ubuntu",Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

a {
	color: transparent;
	text-decoration: none ;

}

a:hover {

	text-decoration: none ;
}

a:visited {
	color: transparent;
	text-decoration: none ;

}



label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}







/*Nav section for mobile*/
@media only screen and (max-width: 600px){
	.topContainer{
		/*background-image: url('/img/orangeBack.png');
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		height:9%;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: flex-end;
		position: absolute;
		z-index: 99;*/
		display: none;


	}

	.logoContainer{
		width: 20%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;

	}

	.artisaneLogo{
		width: 40%;
		height: 100%;
		color: #333333 ;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-style: normal;
		font-weight: 900;
		font-size: 2.2vw;
		margin-left: 13.2%;
	}

	.artisaneLogo:hover{
		opacity: 1;
		color: white;
	}
	.artisaneLogo:active{
		border-color: red;
		border-style: solid;
		border-width: 0px;
		-moz-outline-style: none;
		 outline: 0;
	}
	.artisaneLogo:focus{
		border-style: solid;
		border-width: 0px;
		-moz-outline-style: none;
		 outline: 0;
	}


	
	

	.menuContainer{
		width: 70%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;		
	}

	.menuItem{
		color: black;
		font-family: "Ubuntu",Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif;
		font-style: normal;
		font-weight: 700;
		font-size: 1.2vw;
	}

	.menuItem:hover{
		color: white;
	}


	.signUpBtnContainer{
		width: 10%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 0px;

	}

	.signUpBtn{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.signUpBtnTxt{
		width: 90%;
		height: 67.65%;
		background-color:transparent;
		display: flex;
		align-items: center;
		justify-content: center;	
		color: #333333 !important;
		border:  none;
		font-style: normal;
		font-weight: 700;
		font-size: 1.2vw;
		text-align: center;
		text-transform: none;
		text-decoration: underline;
		animation-duration: 2.2s;
	    animation-name: signUpBtnTxt-3-Slide;
	    animation-iteration-count: 1;
		animation-timing-function:cubic-bezier(0.0, 0.0, 1.0, 1.0);
		z-index: 2;
		cursor: pointer;

	}

	/*@keyframes signUpBtnTxt-3-Slide {
		0% {

			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}*/

	.signUpBtnTxt:hover{
		color: black;
		background-color: white;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
		border-radius: 10px;

	}
}

/*Home section for mobile*/
@media only screen and (max-width: 600px) {

	main {
		width:100%;
		height:100%;
		background-color: white;
		display: block;
		overflow: scroll;
		overflow-x: hidden;
		scrollbar-width: none;
		scroll-snap-type: y;
		position: relative;
	}

	main::-webkit-scrollbar {
	    width: 0em;
	}

	.mainContainer{
		width:100vw;
		height:100vh;
		background-color: white;
		display: flex;
		flex-direction: row;
		scroll-snap-align: start;
	}

	.orangeSide{
		/*background-image: url('/img/mediterranean_img/cheese.jpg') !important;*/
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		animation-duration: 30s;
		animation-name: orangeSlide;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		will-change: transform;
	}

	@keyframes orangeSlide {
		0%{
			background-image: url('/img/mediterranean_img/seaAndEarth.jpg');
			/*background-position: center right;*/
		}
		20% {
			background-image: url('/img/mediterranean_img/sausageTable.jpg');
			/*background-position: left center;*/

			
		}
		40%{
			background-image: url('/img/mediterranean_img/cheese.jpg');
			/*background-position: center right;*/
			
		}
		80%{
			background-image: url('/img/mediterranean_img/milk2.jpg');
			/*background-position: center right;*/
			
		}
		100% {
		
			background-image: url('/img/mediterranean_img/cheeseRow.jpg');
			/*background-position: left center;*/

		}
	}
}

/*Hero section for mobile*/
@media only screen and (max-width: 600px){

	.heroContainer{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background-color: transparent;
		animation-duration: 1.7s;
		animation-name: heroSlide;
		animation-iteration-count: 1;
		animation-timing-function:cubic-bezier(0.0, 0.0, 1.0, 1.0);

		
	}

	.heroContainer::before{
		content: "";
		background-color: white;
		position: absolute;
		top: 0px;
	  right: 0px;
	  bottom: 0px;
	  left: 0px;
	  opacity: 0.5;
	}

	@keyframes heroSlide {
		0% {

			opacity: 0;
		}
		100% {
			opacity: 0;
		}

	}

	.heroTitle{
		width: 100%;
		height: 30%;
		text-transform: none;
		margin-top: 30%;
		word-wrap: break-word;
		z-index: 9;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/*background-color: orange;*/

	}

	.heroTitleTxt{
		width: 80%;
		height: 80%;
		min-width: 58.59375vw;
		min-height: 124.65373961218836vh;
		transform: translateX(7%);
		/*width: 58.59375vw;
		height: 124.65373961218836vh;*/
		font-style: normal;
		font-weight: 900;
		font-size: 9vw;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 0%;
		letter-spacing: 5%;
		z-index: 10;
		color: white;
		background-image: url('/img/logos/artisaneBig.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
	}


	.heroSubTitle{
		width: 100%;
		height: fit-content;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/*background-color: orange;	*/
		/*margin-top: 6%;*/
	}


	.heroSubTitle:nth-child(2) {
		margin-top: 5%;
	}	

	.heroSubTitle:nth-child(2) > .heroSubTitleTxt{
		font-size: 10vw;
	}

	.heroSubTitle:nth-child(3) {
		/*margin-left: 8%;	*/
		/*background-color: white;*/
		margin-top: 5%;
	}
	

	.heroSubTitleTxt{
		width: fit-content;
		font-style: normal;
		font-weight: 900;
		opacity: 1.2;
		font-size: 6.5vw;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 0%;
		text-transform: uppercase;
		color: black;
	}

	.primaLogoContainer{
		background-color: transparent;
		width:100%;
		height: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 20%;
		position: relative;
		gap: 5%;
	}

	.primaLogo{
		width: 27.278645833333332vw;
		height: 18.005540166204987vh;
		
		background-image: url('/img/logos/prima_logo.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
		transform: scale(1.1);


	}

	.cimoLogo{
		width: 27.278645833333332vw;
		height: 18.005540166204987vh;
		background-image: url('/img/logos/cimoBlack.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
		transform: scale(1);
	}

	.fsqa{
		width: 27.278645833333332vw;
		height: 18.005540166204987vh;
		background-image: url('/img/logos/fsqa.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
		transform: scale(0.9);
	}
}

/*About section for mobile*/
@media only screen and (max-width: 600px){
	.learnMoreContainer{
		width: 100vw;
		height: 100vh;
		background-color: transparent;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10%;
		scroll-snap-align: start;

	}

	.learnMoreContainerTitle{
		width: 80%;
		height: 30%;
		font-style: normal;
		font-weight: 900;
		font-size:  5vw;
		display: flex;
		color: #EF9144;
		line-height: 130%;
		align-items: center;
		justify-content: center;
		text-transform: capitalize;
		text-align: center;
		text-align-last: center;
		text-decoration: none;
		animation-duration: 4s;
	  	animation-name: aboutTitle;
	  	animation-iteration-count: 1;
	  	animation-timing-function:cubic-bezier(0.0, 0.0, 1.0, 1.0);
	  	transform: scale(1.1, 1.2);
	  	margin-top: 0%;
	}


	.learnMoreContainerTxt{
		width: 90%;
		height: 40%;
		color: #333333;
		font-style: normal;
		font-weight: 900;
		font-size: 4.5vw;
		display: flex;
		align-items: center;
		justify-content: center;
		text-transform: none;
		text-align: justify;
		/*text-align-last: center;*/
		letter-spacing: 0.002em;
		line-height: 155%;
		animation-duration:4.5s; 
		margin-top: 0%;
	}
}

/*Products section for mobile*/
@media only screen and (max-width: 600px){
	.ourProductsContainer{
		width: 100vw;
		height: 100vh;	
		background-image: url('/img/orangeBack.png');
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		scroll-snap-align: start;
		gap: 10%;
		will-change: transform;
	}	

	.ourProductsTitle{
		width: 80%;
		height: 10%;
		background-color: transparent;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333333;
		font-size: 10vw;
		font-weight: 900;
		text-transform: capitalize;
		user-select: none; /* Standard */
	}

	.ourProductsMap{
		/*width: 100%;*/
		/*height: 60%;*/
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		transform: scale(0.7) translateX(13%);
	}

	.pin:hover{
		opacity: 0.5;

	}
}

/*Models section for mobile*/
@media only screen and (max-width: 600px){
	.ourModelsContainer{
		width: 100vw;
		height: 100vh;	
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		scroll-snap-align: start;
	}	

	.ourModelsTitle{
		width: 80%;
		height: 20%;
		background-color: transparent;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #EF9144;
		font-size: 10vw;
		font-weight: 900;
		text-transform: capitalize;
		margin-top: 5%;
		user-select: none; /* Standard */

	}

	.ourModelsImg{
		width: 90%;
		height: 90%;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		background-color: transparent;
	}

	.shinnyBtn{

		width: 90%;
		height: 50%;
		background-image: url('/img/shinny/decisionTool.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333333;
		font-style: normal;
		font-weight: 700;
		font-size: 4.5vw;
		text-align: center;
	}

	.shinnyBtn:hover{
		opacity: 0.8;
	}


	.goBackBtn{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 1%;
		transform: rotate(180deg);
		width: auto;
		height: 100%;
	}

	.frameControl{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 4%;
		width: 100%;
	}
	.shinnyApp{
		position: static;
		width: 100%;
		height: 95%;
		border: none;
	}
}

/*Footer section for mobile*/
@media only screen and (max-width: 600px){

	.myFooter{
		width: 100vw;
		height: 50vh;
		background-color: black;
		scroll-snap-align: start;
		display: flex;
		flex-direction: column;

	}

	.footerTopContainer{
		width: 100%;
		height: 90%;
		display: flex;
		flex-direction: row;
	}

	.footerBottomContainer{
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/*background-color: white;	*/
	}

	.ArtisaneCopyRight{

	}

	.leftSideContainer{
		width: 60%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-left: 2%;
		/*background-color: orange;*/

	}
	.footerColumn{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		/*background-color: darkred;*/
		margin-top: 2%;
	}

	.footerColumnItem{
		width: 100%;
		height: 30%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: white;
		opacity: 0.8;
		cursor: pointer;
		font-size: 5vw;
		font-weight: 900;
		text-decoration: none;
		user-select: none; /* Standard */
		cursor: pointer;
	}


	.footerColumnItem:hover{
		/*color: white;*/
		/*opacity: 1;*/

	}
	.footerColumnItem:active{
			opacity: 1;
			color: orange;

	}

	.righSideContainer{
		width: 50%;
		height: 100%;
		/*background-color: orange;*/
	}
}

/*Powered by section for mobile*/
@media only screen and (max-width: 600px){
	.poweredByContainer{
			width: 100%;
			height:100%;
			display: flex;
			flex-direction: column;
			float: right;

	}

	.poweredByTextContainer{
		width: 100%;
		height: 30%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 0%;
		user-select: none; /* Standard */
	}

	.poweredByText{
		width: 100%;
		height: 50%;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-style: normal;
		font-weight: 700;
		font-size: 5vw;
		text-transform: uppercase;
	}


	.poweredByLogosContainer{
		width: 100%;
		height: 70%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-evenly;
		margin-top: 2%;
		gap: 2%;
	}

	.logo{
		background-color: transparent;
		transform: scale(0.5);
	}

	.fsqa{
		width:83px;
		height: 50px;
		background-image: url('/img/logos/fsqa_logo.png');
		background-repeat: no-repeat;
		background-size: cover;
	}
	.artisane{
		width:65px;
		height: 50px;
		background-image: url('/img/logos/artisane_white.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.cimo{
		width:137px;
		height: 50px;
		background-image: url('/img/logos/cimo_logo.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.ipb{
		width:193px;
		height: 50px;
		background-image: url('/img/logos/ipb.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.prima{
		width:161px;
		height: 50px;
		background-image: url('/img/logos/prima_logo.png');
		background-repeat: no-repeat;
		background-size: cover;
	}
}

/*Country Selected section for mobile*/
@media only screen and (max-width: 600px){
	.productsContainer{
		width: 90%;
		height: 60%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: -3%;
		flex-direction: column;
		animation-duration: 0.6s;
		animation-name: productsShow;
		animation-iteration-count: 1;
		animation-timing-function:cubic-bezier(0.0, 0.0, 1.0, 1.0);
	}

	@keyframes productsShow {
		0%{

			/*transform: translate(50%,0%);*/
			/*width: 0%;
			height: 0%;*/
		}
		100%{
			/*transform: translate(0%,0%);*/
			/*width: 90%;
			height: 60%;*/

		}
	}

	.titleContainer{

		width: 100%;
		height: 16%;
		
	}

	.title{
		color: #EF9144;
		font-style: normal;
		font-weight: 900;
		font-size: 8vw;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		margin-left: 1%;
		margin-top: -2%;
	    text-shadow:
		   -1px -1px 0 #333333,  
		    1px -1px 0 #333333,
		   -1px 1px 0 #333333,
		    1px 1px 0 #333333;
		animation-duration: 1s;
		animation-name: titleShow;
		animation-iteration-count: 1;
		animation-timing-function:cubic-bezier(0.0, 0.0, 1.0, 1.0);
		z-index: 40;
		
	}

	@keyframes titleShow{
		0%{
			text-shadow:
		   -1px -1px 0 #EF9144,  
		    1px -1px 0 #EF9144,
		   -1px 1px 0 #EF9144,
		    1px 1px 0 #EF9144;
		}
		100%{
			text-shadow:
		   -1px -1px 0 #333333,  
		    1px -1px 0 #333333,
		   -1px 1px 0 #333333,
		    1px 1px 0 #333333;
		}
	}

	.imgContainer{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 3%;
		flex-wrap: wrap;
		/*margin-top: 4%;*/
	}

	.itemContainer{
		border-radius: 50%;
		background-color: white;
		width: 155px;
		height: 155px;
		min-width: 50px;
		min-height: 50px;
		max-width: 250px;
		max-height: 250px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
	}

	.item{
		/*border-radius: 50%;*/
		width: 50%;
		height: 30%;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		/*max-width: 20%;*/
		/*max-height: 20%;*/
		/*background-color: orange;*/

	}
}





/*section for mobile*/
@media only screen and (max-width: 600px){
	
}
/*section for mobile*/
@media only screen and (max-width: 600px){
	
}
/*section for mobile*/
@media only screen and (max-width: 600px){
	
}
/*section for mobile*/
@media only screen and (max-width: 600px){
	
}
/*section for mobile*/
@media only screen and (max-width: 600px){
	
}