@import url("font-awesome.min.css");
@import url('https://fonts.googleapis.com/css?family=Roboto');


.first-bar {
	background-color: #1F9C90;
	background-repeat: no-repeat;
	background-position: right 0% bottom 0%;
}
.second-bar {
	background-color: #67AE00;
	background-repeat: no-repeat;
	background-position: right 0% bottom 0%;

}
.third-bar {
	background-color: #c53232;
	background-image: url('../../images/bg_interne_rouge.png');
	background-repeat: no-repeat;
	background-position: right 0% bottom 0%;
}
.fourth-bar {
	background-color: #DBA300;
	background-repeat: no-repeat;
	background-position: right 0% bottom 0%;
}

.fp-tableCell {
	display: flex !important;
	flex-direction: row;
}

.first-bar-left, .second-bar-left, .third-bar-left, .fourth-bar-left {
	position: relative;
	height: 100%;
	width: 45%;

	display: flex;
	align-items: center;
	justify-content: center;
}
.first-bar-right, .second-bar-right, .third-bar-right, .fourth-bar-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	height: 100%;
	width: 55%;
}

.first-bar-right > .about, .second-bar-right > .about, .third-bar-right > .about, .fourth-bar-right > .about {
	position: relative;
	padding: 1em;
	-vendor-animation-duration: 1s;
	-vendor-animation-delay: .4s;

	-webkit-animation-duration: 1s;
	-webkit-animation-delay: .4s;

	-moz-animation-duration: 1s;
	-moz-animation-delay: .4s;
}


.first-bar-right > .about > h1, .second-bar-right > .about > h1, .third-bar-right > .about > h1, .fourth-bar-right > .about > h1 {
	font-family: 'Roboto', sans-serif;
	font-size: 2.5em;
	color: #fbf9e1;
}

.first-bar-right > .about > a, .second-bar-right > .about > a , .third-bar-right > .about > a , .fourth-bar-right > .about > a  {
	display: block;
	color: #f5c797;
  font-size: 1.5em;
  font-weight: 800;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}

.first-bar-right > .about > a:hover, .second-bar-right > .about > a:hover ,
.third-bar-right > .about > a:hover , .fourth-bar-right > .about > a:hover  {
	color: #492b0d;
  transition: color 1s ease-out;
}

/* .product-container {
	position: relative;
	height: 22em;
  width: 22em;
	background-color: white;
} */

.product-container > .layer {
	display: none;
}

/* .product-container:hover > .layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	z-index: 10;
	background-color: rgba(34, 39, 41, 0.76);
	display: flex;
	align-items: center;
	justify-content: center;
} */
/* .product-container:hover > img {
	transform: rotate(-20deg) scale(.8);
} */
.product-container > .layer > a {
	font-family: 'Roboto', sans-serif;
	font-size: 2em;
	font-weight: bold;
	color: #fbf9e1;
	text-decoration: none;
	outline: none;
}


.product-container > img {
	width: 50%;
  position: relative;
	left: 25%;
	-webkit-animation: barMotion 8s infinite;
	animation: barMotion 8s infinite;
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}

.next-button-wrapper {
	position: absolute;
	right: 0;
	bottom: 0.5em;
	padding-right: 2%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.next-button-wrapper > h1 {
	font-family: 'Roboto', sans-serif;
	color: #fbf9e1;
	font-size: 1.2em;
  padding-bottom: 5%;
}

.next-button {
	height: 12vh;
  width: 12vh;
	border-radius: 50%;
  border: .1em solid #fbf9e1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.next-button > img {
	cursor: pointer;
	display: block;
	margin: 0 auto;
	height: 4em;
	width: 4em;
}

.next-button:hover > img {
	height: 5em;
	width: 5em;
}

.almond-button > img {
	padding-top: 2%;
	height: 87%;
	width: 80%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.almond-button > img:hover {
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
}
 .coconut-img {
	 z-index: 5;
	position: absolute;
	width: 6em;
	top: 15%;
	left: 73%;
	-webkit-animation: crazyFruit 8s infinite; /* Safari, Opera, Chrome */
  animation: crazyFruit 8s infinite; /* Tous les autres navigateurs */
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.first-bar-left > .almond-img {
	z-index: 5;
	position: absolute;
  width: 8em;
  left: 13%;
  top: 6%;
	-webkit-animation: crazyFruit 8s infinite; /* Safari, Opera, Chrome */
  animation: crazyFruit 8s infinite; /* Tous les autres navigateurs */
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}

.first-bar-left > .cashew-img {
	z-index: 5;
	position: absolute;
  left: 8%;
  top: 78%;
  width: 5em;
	-webkit-animation: crazyFruit 8s infinite; /* Safari, Opera, Chrome */
  animation: crazyFruit 8s infinite; /* Tous les autres navigateurs */
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
 .first-bar-left > .cacao-img {
	z-index: 5;
	position: absolute;
	top: 45%;
	width: 9em;
  left: 0%;
	-webkit-animation: crazyFruit 8s infinite; /* Safari, Opera, Chrome */
  animation: crazyFruit 8s infinite; /* Tous les autres navigateurs */
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}

.second-bar-left > .almond-img {
	z-index: 5;
	position: absolute;
	width: 8em;
	left: 69%;
	top: 6%;
	-webkit-animation: crazyFruit 8s infinite;
	animation: crazyFruit 8s infinite;
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}

.second-bar-left > .cashew-img {
	z-index: 5;
	position: absolute;
  left: 8%;
  top: 78%;
  width: 5em;
  -webkit-animation: crazyFruit 8s infinite;
  animation: crazyFruit 8s infinite;
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}

.third-bar-left > .cashew-img {
	z-index: 5;
	position: absolute;
	width: 5em;
	left: 69%;
	top: 6%;
	-webkit-animation: crazyFruit 8s infinite;
	animation: crazyFruit 8s infinite;
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}

.fourth-bar-left > .almond-img {
	z-index: 5;
	position: absolute;
	width: 8em;
	left: 69%;
	top: 6%;
	-webkit-animation: crazyFruit 8s infinite;
	animation: crazyFruit 8s infinite;
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}

.fourth-bar-left > .cashew-img {
	z-index: 5;
	position: absolute;
  left: 8%;
  top: 78%;
  width: 5em;
  -webkit-animation: crazyFruit 8s infinite;
  animation: crazyFruit 8s infinite;
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}

.fourth-bar-left > .banana-img {
	z-index: 5;
	position: absolute;
  left: 8%;
  top: 3%;
  width: 6em;
  -webkit-animation: crazyFruit 8s infinite;
  animation: crazyFruit 8s infinite;
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.first-bar-right > .almond-wrapper {
	position: relative;
  float: left;
}
.first-bar-right > .almond-wrapper > img {
	position: relative;
	width: 42%;
	transform: rotate(-78deg);
	opacity: .8;
}


.button-plus {
	position: absolute;
	top: 42%;
	left: 94%;
	color: white;
	cursor: pointer;
}
.button-plus > .fas {
	font-size: 2em;
}

.product-container img {
	width: 16em;
}
/**************Animation****************/

@keyframes crazyFruit {
    0% {
				-webkit-transform: translateY(0em) rotate(-23deg);
        transform: translateY(0em) rotate(-23deg);
    }

    50% {
				-webkit-transform: translateY(2em) rotate(-23deg);
				transform: translateY(2em) rotate(-23deg);
    }

    100% {
				-webkit-transform: translateY(0em) rotate(-23deg);
				transform: translateY(0em) rotate(-23deg);
    }
}

@keyframes barMotion {
    0% {
				-webkit-transform: translateY(0em);
        transform: translateY(0em);
    }

    50% {
				-webkit-transform: translateY(2em);
				transform: translateY(2em);
    }

    100% {
				-webkit-transform: translateY(0em);
				transform: translateY(0em);
    }
}
/***********Responsivness************/
@media only screen and (max-width: 1300px) {
	.first-bar-right > .about > h1, .second-bar-right > .about > h1, .third-bar-right > .about > h1, .fourth-bar-right > .about > h1 {
		font-size: 2.8em;
	}

	.product-container > img {
		padding-top: 3%;
	}

}
/* @media only screen and (max-width: 950px) {
	.product-container {
		left: 8%;
	}
} */
@media only screen and (max-width: 900px) {

 .coconut-img, .almond-img, .cacao-img, .cashew-img, .banana-img {
		 -webkit-transform: rotate(-23deg);
		 transform: rotate(-23deg);
		-webkit-animation: none !important;
	  animation: none !important;
		-webkit-transition: none !important;
		transition: none !important;
	}

	.product-container:hover > .layer {
		display: none;
	}
	.product-container:hover > img {
    filter: blur(0px);
	}
	.product-container > .layer > a {
		font-size: 1.3em;
	}
	.next-button > img, .next-button:hover > img  {
		width: 2em;
		height: 2em;
	}
	/* .product-container {
		margin-top: 0;
		margin-left: 0;
		width: 16em;
		height: 16em;
	} */
	.fp-tableCell {
		flex-direction: column;
	}
	/***First part****/
	.first-bar-left, .second-bar-left, .third-bar-left, .fourth-bar-left {
    height: 80%;
		width: 100%;

	}

	.coconut-img {
    width: 4em;
	}
	.first-bar-left > .almond-img {
    width: 5em;
	}
	.first-bar-left > .cashew-img {
    width: 3.5em;
}
	.first-bar-left > .cacao-img {
	   width: 5em;
	}

	.second-bar-left > .almond-img {
		width: 5em;
	}
	 .fourth-bar-left > .banana-img {
		 width: 4em;
	 }
	 .fourth-bar-left > .almond-img {
		 width: 4em;
	 }
	.second-bar-left > .cashew-img, .third-bar-left > .cashew-img {
		width: 4em;
	}
	.fourth-bar-left > .cashew-img {
		width: 3em;
	}


	/***second part****/
	.first-bar-right, .second-bar-right, .third-bar-right, .fourth-bar-right {
		height: 20%;
    width: 100%;
		justify-content: flex-start;
	}
	.first-bar-right > .about > h1, .second-bar-right > .about > h1, .third-bar-right > .about > h1, .fourth-bar-right > .about > h1 {
		font-size: 1.3em;
		color: white;
		font-weight: 800;
		padding-top: 0;
		padding-right: 0;
	}

	.first-bar-right > .about > a, .second-bar-right > .about > a , .third-bar-right > .about > a , .fourth-bar-right > .about > a  {
		font-size: 1em;
		font-weight: 800;
	}

	a:hover {
		color: 	white;
		text-decoration: none;
	}

	.next-button {
    height: 10vh;
    width: 10vh;
	}

	.next-button-wrapper {
    position: absolute;
    right: .5em;
    bottom: .5em;
		cursor: pointer;
	}

	@media only screen and (max-width: 500px) {
		.next-button-wrapper > h1 {
			display: none;
		}
	}

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

	/* .first-bar-right > .about > h1, .second-bar-right > .about > h1, .third-bar-right > .about > h1, .fourth-bar-right > .about > h1 {
		font-size: .9em;
	} */

	.image-holder > .coconut {
		width: 45%;
	}
	.button_container {
		right: 1em !important;
		top: 1em !important;
	}

}