/* GENERAL */
body {
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;	  
}

.degrade-1 {
	background:linear-gradient(45deg, #0374AA, #319951);
}

.color1 { 
	color:#0072B0;
}
.color2 { 
	color:#F08422; /* orange */
}
.color3 { 
	color:#012C43;
}
.color4 { 
	color:#005086;
}
.color5 { 
	color:#263777; /* violet */
}
	
/* FONTS */
.barlow-thin {
  font-family: "Barlow", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.barlow-extralight {
  font-family: "Barlow", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.barlow-light {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.barlow-regular {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.barlow-medium {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.barlow-semibold {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.barlow-bold {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.barlow-extrabold {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.barlow-black {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.barlow-thin-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.barlow-extralight-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.barlow-light-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.barlow-regular-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.barlow-medium-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.barlow-semibold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.barlow-bold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.barlow-extrabold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.barlow-black-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* HEADER */
#logo-haut {
	width:220px;
}

#pingouin-haut {
	width:80px;
}

.parallax-section-1 {
  background: linear-gradient(45deg, #0374AA, #319951);
  position: relative;
  overflow: hidden;
}
.flocon1 {
  position: absolute;
  left:-40px;
  top: 10px;
  transform: rotate(45deg);
}

.flocon2 {
  position: absolute;
  right:10%;
  top: 100px;
}

.flocon3 {
  position: absolute;
  transform: rotate(-45deg);
  right:40%;
  top: 10px;
}

.flocon4 {
  position: absolute;
  left:30px;
  top: 100px;
  transform: rotate(45deg);
}

.flocon5 {
  position: absolute;
  left:100px;
  bottom: 30px;
  transform: rotate(45deg);
}

.flocon6 {
  position: absolute;
  transform: rotate(-45deg);
  right:10%;
  top: 200px;
}

/* BANDEAU HAUT */	
.img-bandeau { 
	width: 100%;
	max-width: 200px;
	height: auto;
}
.parallax-section-2 {
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.flocon7 {
  position: absolute;
  left:-40px;
  top: 10px;
  z-index:9;
}

.flocon8 {
  position: absolute;
  right:10%;
  top: 10px;
  z-index:9;
}

.flocon9 {
  position: absolute;
  right:40%;
  top: 10px;
  transform: rotate(45deg);
  z-index:9;
}

.flocon10 {
  position: absolute;
  left:30px;
  top: 80px;
  z-index:9;
}

/* NOTRE GAMME */
#section-gamme {
	padding-bottom:160px;
}
#section-gamme .fa-circle {
	font-size:0.5rem;
}
.bg-cover {
	background-image: url('../images/fond1.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* LOGO EN DECALAGE */
.image-container {
  position: relative;
  height: 0;
}
.image-container-inside {
  position: relative;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  height: 300px;
  width:100%;
  z-index: 10;
  text-align:center;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float {
	margin-top:25px;
	height:250px;
	animation: float 3s ease-in-out infinite;
}

.flocon11 {
  position: absolute;
  left:-40px;
  top: 10px;
  z-index:9;
}

.flocon12 {
  position: absolute;
  right:10%;
  top: 10px;
  z-index:9;
}

.flocon13 {
  position: absolute;
  right:40%;
  top: 10px;
  transform: rotate(45deg);
  z-index:9;
}

.flocon14 {
  position: absolute;
  left:30px;
  top: 80px;
  z-index:9;
}

/* FONCTIONNEMENT */
#section-fonctionnement {
	padding-top:160px;
}
.one-bloc-1 { 
	width:81px;
	height:79px;
}
.one-bloc-2 { 
	width:81px;
	height:79px;
	transform: scaleX(-1);
}
.one-bloc-3 { 
	width:81px;
	height:79px;
}
#bloc-orange-1 {
	z-index:1;
	width:81px;
	height:79px;
	left:40px;
	background:url('../images/forme-orange.png') top left no-repeat;
}
#bloc-orange-2 {
	width:81px;
	height:79px;
	left:-40px;
	background:url('../images/forme-orange.png') top left no-repeat;
	transform: scaleX(-1);
}
#bloc-orange-3 {
	z-index:1;
	width:81px;
	height:79px;
	left:40px;
	background:url('../images/forme-orange.png') top left no-repeat;
}

.puce-orange {
	font-size:0.7rem;
}
.container-centre-droit {
	display: flex;
	justify-content: flex-end;
}

.demi-bloc-droit {
	width: 50vw;
	background-color: #0072B0;
	border-top-left-radius: 100vw;
	border-bottom-left-radius: 100vw;
	padding: 0.5rem;
	box-sizing: border-box;
}

.container-centre-gauche {
	display: flex;
	justify-content: flex-start;
}

.demi-bloc-gauche {
	width: 50vw;
	background-color: #005086;
	border-top-right-radius: 100vw;
	border-bottom-right-radius: 100vw;
	padding: 0.5rem;
	box-sizing: border-box;
}

.demi-bloc-contenu-droit {
	text-align: left;
	padding-left:100px;
}
.demi-bloc-contenu-gauche {
	text-align: right;
	padding-right:100px;
}

.demi-bloc-droit-bis {
	width: 50vw;
	background-color: #263777;
	border-top-left-radius: 100vw;
	border-bottom-left-radius: 100vw;
	padding: 0.5rem;
	box-sizing: border-box;
}

/* BENEFICES */
#section-benefices img {
	height:100px;
}

/* LES DIFFUSEURS CHILLWORLD */
#les-diffuseurs h3 img {
	width:20px;
}
.bg-cover2 {
	background-image: url('../images/fond2.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* OU NOUS TROUVER */
.accordion-button[aria-expanded="true"] {
	background-color: #FFFFFF;
}

/* ACTUALITES */
.actu-contenu a:link {
	color:white;
}
.actu-contenu a:visited {
	color:white;
}
.actu-contenu a:hover {
	color:white;
}
.actu-contenu p { 
	font-size:1.2rem;
}
.actu-titre {
	height:50px;
}
#buttonPrev {
	border-radius:50%;
	background-color:#F08422;
	width:45px;
	height:45px;
	padding-top:6px;
	padding-right:5px;
}
#buttonNext {
	border-radius:50%;
	background-color:#F08422;
	width:45px;
	height:45px;
	padding-top:6px;
	padding-left:5px;
}

/* FORMULAIRE */
#section-contact {
	background-color:#0072B0;
}
.form-control, textarea.form-control {
	border-radius: 25px;
	padding: 10px 20px;
}

textarea.form-control {
	resize: none;
	height: 150px;
}

.form-title {
	text-align: center;
	font-weight: bold;
	margin-bottom: 30px;
	font-size: 1.8rem;
}

.btn-orange {
	background-color: #ff7f00;
	color: white;
	border-radius: 25px;
	padding: 10px 30px;
	border: none;
}

.btn-orange:hover {
	background-color: #F08422;
}
/* FOOTER */
footer {
	background-color:#005086;
	padding-bottom:100px;
}
	
footer img {
	max-width:300px !important;
}

/* CTA STICKY */
#stickyContainer {
	position: fixed;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	height:80px;
	width:100%;
	background-color:white;
	text-align:center;
	border-top:1px solid #F08422;
	padding-top:10px;
}

/* MEDIA QUERIES */
@media screen and (max-width: 992px) {
	.demi-bloc-droit, .demi-bloc-droit-bis {
		width: 85vw;
		
	}
	.demi-bloc-gauche {
		width: 85vw;
	}
}
@media screen and (max-width: 468px) {
	.demi-bloc-droit, .demi-bloc-droit-bis {
		width: 90vw;
		
	}
	.demi-bloc-gauche {
		width: 90vw;
	}
}

@media screen and (min-width: 993px) {
	.img-partenaire { 
		width:200px; 
	}
}