@charset "UTF-8";
/* CSS Document */

body{
	font-family: verdana;
}

#goutte{
	background: url("images/goutte-header.jpg") center no-repeat;
	background-size: cover;
	height: 948px;
	border-bottom: 28px solid #12385F;
}

#color li a{
	color: #ffffff;
	font-size: 22px;
	text-align: center;
	border-right: 1px solid #707070;
	background-color: #73BFEB;
	padding: 12px;
	display: block;
}

#color li a:hover{
	background-color: #12385F;
}

#logo{
	width: 70px;
}

#reglage{
	margin-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	width: 70px;
}

#contact_reglage{
	border-right: none !important;
}

#reglage_nav{
	padding-top: 0px;
	position: fixed;
	z-index: 99;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
}

#ombre{
	box-shadow: 0 2px 8px #12385F;
	background-color: #73BFEB;
}

h3{
	text-align: center;
	color: #12385F;
	font-size: 42px;
	padding-top: 80px;
}

h1{
	text-align: center;
	font-size: 50px;
	color: #12385F;
	background: url("images/Rectangle-optez.svg") center no-repeat;
	padding: 18px;
	margin-top: 342px;
}

#lesaviez{
	background-color: #FFF2E2;
	overflow: hidden;
}

h2{
	font-family: ananda;
	text-align: center;
	font-size: 72px;
	color: #73BFEB;
	padding-top: 74px;
}

.paragraphe{
	text-align: left;
	font-size: 22px;
	color: #12385F;
	padding-top: 172px;
	letter-spacing: 2px;
	padding-bottom: 208px;
}

#robinet{
	width: 49.3%;
	position: absolute;
}

#consequences{
	background: url("images/bulles-1.png") bottom no-repeat;
	background-color: #73BFEB;
	overflow: hidden;
}

#reglages_consequences{
	color: #ffffff;
	padding-top: 74px;
	padding-bottom: 118px;
}

.color li{
	color: #ffffff;
	font-size: 22px;
	padding-top: 16px;
}

.fondu{
	position: relative;
}

#douche_tartre{
	box-shadow: 0 2px 8px #12385F;
	position: absolute;
	opacity: 1;
	transition: 0.5s;
}

#douche_propre{
	box-shadow: 0 2px 8px #12385F;
}

#douche_tartre:hover{
	opacity: 0;
}

.vague{
	background: url("images/vague.svg") center no-repeat;
	height: 176px;
}

.vague_beige{
	background: url("images/vague-beige.svg") bottom no-repeat;
	height: 95px;
}

#adoucisseur{
	background-color: #FFF2E2;
	overflow: hidden;
}

#retrait{
	padding-right: 212px;
	padding-bottom: 26px;
}

#adoucisseur_top{
	padding-top: 246px;
	position: absolute;
}

#produits{
	background: url("images/bulles-2.png") bottom no-repeat;
	background-color: #73BFEB;
	overflow: hidden;
}

#reglages_produits{
	color: #ffffff;
	padding-top: 74px;
	padding-bottom: 122px;
}

#sous_titre{
	font-family: verdana;
	font-size: 36px;
}

ol{
	padding-top: 86px;
}

ol li{
	color: #ffffff;
	font-size: 24px;
	text-align: left;
	line-height: 52px;
	margin-left: 50px;
}

#bulle{
	background: url("images/bulle-produits-1.png") left no-repeat;
	height: 504px;
	margin-bottom: 26px;
}

#reglages_offres{
	color: #ffffff;
	font-size: 24px;
	padding-top: 124px;
	padding-left: 34px;
}

#avantages{
	background-color: #FFF2E2;
	overflow: hidden;
}

#avantages_sous_titre{
	margin-bottom: 48px;
}

#avantages ul{
	padding-left: 74px;
}

ul li{
	text-align: left;
	font-size: 24px;
	line-height: 46px;
    color: #12385F;
}

#avantages .vague{
	margin-top: 48px;
}

#avantages .img-fluid{
	box-shadow: 0 2px 8px #12385F;
}

#contact{
	background: url("images/bulles-contact.png") center no-repeat;
	background-color: #73BFEB;
	padding-bottom: 98px;
	overflow: hidden;
}

#reglages_contact{
	color: #ffffff;
	padding-top: 12px;
	padding-bottom: 76px;
}

#picto_position{
	width: 18px;
	margin-top: 2px;
	margin-left: 238px;
	float: left;
}

#picto_telephone{
	width: 18px;
	margin-top: 8px;
	margin-left: 238px;
	float: left;
}

#picto_courrier{
	width: 18px;
	margin-top: 8px;
	margin-left: 238px;
	float: left;
}

#contact .col-md-6 p{
	color: #ffffff;
	font-size: 20px;
	padding-left: 268px;
}

#contact .col-md-6 input{
	margin-bottom: 8px;
}

#contact .col-md-6 label{
	color: #ffffff;
}

footer{
	background-color: #12385F;
}

#facebook_blanc{
	padding: 18px;
}

p a{
	color: #ffffff;
	text-decoration: none;
	text-align: center;
    display: block;
}

p a:hover{
	color: #73BFEB;
}

#copyright a{
	color: #9E9A9B;
}

#copyright a:hover{
	color:#E29303;
}

#contactez{
	margin-bottom: 0px;
}

#contact input[type="submit"]{
	text-align: center;
	color: #ffffff;
	display: block;
	background-color: #12385F;
    width: 112px;
	padding: 8px;
	margin-top: 12px;
}

#contact input[type="submit"]:hover{
	background-color: #73BFEB;
}

.mouse-icon {
  margin: 142px auto 0;
  border: 2px solid #fff;
  border-radius: 16px;
  height: 40px;
  width: 24px;
  display: block;
  z-index: 10;
  opacity: 0.7;
	cursor: pointer;
}
.mouse-icon .wheel {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
}
.mouse-icon .wheel {
  position: relative;
  border-radius: 10px;
  background: #fff;
  width: 2px;
  height: 6px;
  top: 4px;
  margin-left: auto;
  margin-right: auto;
}
@-webkit-keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}
@keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}

.navbar-light .navbar-toggler{
	border: none !important;
	background-color: #FFF2E2;
	height: 70px;
    width: 70px;
}

.navbar-toggler:focus{
	box-shadow: 0 0 0 0 !important;
}



                            @media(max-width:1200px){
	#color li a{
		font-size: 18px;
	}

	h3{
		font-size: 32px;
	}
	
	h1{
		font-size: 38px;
		margin-top: 402px;
	}

	h2{
		font-size: 68px;
	}

	.paragraphe{
		font-size: 18px;
		padding-top: 116px;
		padding-bottom: 38px;
	}

	.color li{
		font-size: 18px;
		line-height: 38px;
	}

	#sous_titre{
		font-size: 34px;
	}
	
	#reglages_produits{
		padding-bottom: 16px;
	}
	
	#bulle{
		background: url();
		height: 400px;
	}

	#reglages_offres{
		font-size: 22px;
		padding-top: 132px;
    }

	ul li{
		font-size: 18px;
    }
	
	#contact .col-md-6 p{
		padding-left: 168px;
	}

	#retrait{
		padding-bottom: 42px;
		padding-right: 122px;
    }  

	#adoucisseur_top{
		padding-top: 178px;
    }

	#picto_position{
		width: 14px;
		margin-left: 152px;
	}

	#picto_telephone{
		width: 14px;
		margin-left: 152px;
	}

	#picto_courrier{
		width: 14px;
		margin-left: 152px;
	}
}

                            @media(max-width:991px){
	#reglage_nav{
		width: 100%;
		padding-left: 20px;
        padding-right: 20px;
	}
								
	#color li a{
		border-bottom: 1px solid #707070;
		border-right: none;
   }

     h3{
		font-size: 30px;
	}
	
    h1{
		font-size: 30px;
		margin-top: 414px;
	}

   h2{
		font-size: 52px;
	   padding-top: 42px;
		padding-bottom: 28px;
	}

	.paragraphe{
		font-size: 16px;
		padding-top: 41px;
	}
	
	#robinet{
		padding-top: 120px;
	}
	
	#reglages_consequences{
		padding-top: 0px;
		padding-bottom: 74px;
	}

	.color li{
		font-size: 17px;
		padding-top: 6px;
		padding-bottom: 12px;
		line-height: 28px;
	}

	#sous_titre{
		font-size: 30px;
	}
	
	ol{
		padding-top: 62px;
	}

	ol li{
		font-size: 23px;
		margin-left: 0px;
	}

	#reglages_offres{
		font-size: 17px;
	}

	ul li{
		font-size: 17px;
	}

    #retrait{
		padding-bottom: 36px;
		padding-right: 14px;
	}

	#adoucisseur_top{
		padding-top: 302px;
	}

	#reglages_produits{
		padding-top: 0px;
		padding-bottom: 18px;
	}

	#contact .col-md-6 p{
		font-size: 18px;
		padding-left: 92px;
	}

	#picto_position{
		margin-left: 80px;
	}

	#picto_telephone{
		margin-left: 80px;
	}

	#picto_courrier{
		margin-left: 80px;
	}

	p a{
		font-size: 12px;
	}
}

                             @media(max-width:767px){
    .navbar-light .navbar-toggler{
		 width: 60px;
		 height: 60px;
	}
								 
	#color li a{
		 font-size: 16px;
	}
								
	h1{
		font-size: 26px;
		margin-top: 418px;
	}

	h2{
		font-size: 40px;
		padding-bottom: 54px;
	}

	.paragraphe{
		font-size: 15px;
		padding-top: 26px;
		padding-bottom: 38px;
	}
	
	#bulle{
		height: 382px;
	}

    .color li{
		font-size: 16px;
		line-height: 32px;
	}
								 
    #sous_titre{
		font-size: 23px;
	}
	
	h3{
		font-size: 25px;
		padding-top: 70px;
	}
	
	#logo{
		width: 60px;
	}
								
	#robinet{
		padding-top: 0px;
        position: static;
        display: block;
		margin: auto;
		background-color: rgba(115,191,235,0.5);
		border-radius: 14%;
		margin-bottom: 24px;
	}
								
	#adoucisseur_top{
		padding-top: 25px;
        position: static;
        padding-left: 245px;
	}							
	
    ol{
	    padding-top: 34px;
		padding-left: 30px;
    }
								 
	ol li{
		font-size: 21px;
    }

	ul li{
		font-size: 16px;
	}

    #avantages ul{
	padding-left: 54px;
    }

	#retrait{
		padding-bottom: 8px;
		padding-right: 124px;
	}

	#reglages_produits{
		padding-bottom: 54px;
	}

    #reglages_offres{
	    padding-top: 78px;
		padding-left: 0px;
    }

    #contact .col-md-6 p{
		padding-left: 36px;
	}

	#picto_position{
		width: 10px;
		margin-left: 18px;
	}

	#picto_telephone{
		width: 10px;
		margin-left: 18px;
	}

	#picto_courrier{
		width: 10px;
		margin-left: 18px;
	}
}

                              @media(max-width:576px){
	#logo{
		width: 50px;
	}
								  
	.navbar-light .navbar-toggler{
		 width: 50px;
		 height: 50px;
	}

	#color li a{
		font-size: 14px;
	}

	h3{
		font-size: 23px;
	}

	h1{
		font-size: 24px;
		margin-top: 430px;
	}

	h2{
		font-size: 32px;
		padding-bottom: 28px;
	}
	
	.color li{
		font-size: 15px;
		padding-top: 8px;
		line-height: 28px;
	}
								  						  
	#reglages_consequences{
		padding-bottom: 42px;
		font-size: 32px;
	}
	
	#avantages ul{
	padding-left: 20px;
    }

	#sous_titre{
		font-size: 18px;
	}

	ol li{
		font-size: 20px;
	}

	#reglages_offres{
		padding-top: 0px;
	}

	ul li{
		font-size: 14px;
	}

	#retrait{
		padding-right: 0px;
	}
	
	#contact{
		padding-bottom: 58px;
	}

	#facebook_blanc{
		padding: 8px;
        width: 38px;
	}
}