/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */



h1{
	font-family: "Steamtown", "sans-serif" !important;
	font-weight: normal !important;
	font-size: 3em;
}
h2{
	font-size: 2.4em;
}
h3{
	font-family: "Steamtown", "sans-serif" !important;
	font-weight: normal !important;
	font-size: 1.8em;
}
h4{
	font-size: 1.4em;
}

h1 span{
	color: #5bb0e1;
}

.AxeptioButton__AxeptioButtonStyle-sc-1h6hacv-0{
  visibility: hidden;
}
div[data-hide-on-vendor-consent="youtube"],div[data-hide-on-vendor-consent="gmaps"]{
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .1);
}
div[data-hide-on-vendor-consent="youtube"] button, div[data-hide-on-vendor-consent="gmaps"] button{
    position: absolute;
    z-index: 2147483647;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.centrer-verticalement {
  display: flex;
  flex-direction: column;
  justify-content: center;

/* Et les déclinaisons avec préfixes pour obtenir un résultat homogène sur les divers navigateurs  */
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
}
.bleu-cf{
	color: #004588 !important;
}


/* HEADER */

.header-sub-bar{
	background-color: #004588;
	padding: 4px 0;
	color: white;
	text-align: center;
	font-weight: bold;
}

.et_header_style_split #main-header .mobile_nav{
	background-color: transparent;
}
.et_header_style_split #main-header .mobile_nav .select_page{
	visibility: hidden;
}

/* HOME */

.steps-home .et_pb_column:nth-child(1):after, .steps-home .et_pb_column:nth-child(2):after{
	content: "›";
	position:absolute;
	top: 50%;
	right: 0;
	transform: translateY(-100%) translateX(100%) scaleY(2);
	font-size: 8em;
	font-family: "titilium web", sans-serif;
	color: #FEC907;
}

.steps-home .et_pb_column{
	opacity: 0;
}
.steps-home .etape_une{
	animation: etapeUne 12s forwards ease-in;
}
.steps-home .etape_deux,.steps-home .etape_une:after{
	animation: etapeDeux 12s forwards ease-in;
}
.steps-home .etape_trois, .steps-home .etape_deux:after{
	animation: etapeTrois 12s forwards ease-in;
}

@keyframes etapeUne{
        0%{opacity: 0;margin-left:-50px;}
        8%{opacity: 1; margin-left:0px;}
        100%{opacity: 1; margin-left:0px;}
}
@keyframes etapeDeux{
        0%{opacity: 0;margin-left:-50px;}
        10%{opacity: 0;margin-left:-50px;}
        18%{opacity: 1; margin-left:0px;}
        100%{opacity: 1; margin-left:0px;}
}
@keyframes etapeTrois{
        0%{opacity: 0;margin-left:-50px;}
        20%{opacity: 0;margin-left:-50px;}
        28%{opacity: 1; margin-left:0px;}
        100%{opacity: 1; margin-left:0px;}
}


.phone-slider-home{
	display:inline-block;
	border:1px solid white; 
	border-radius:50px; 
	padding: 10px 12px 0px 12px; 
	margin: 2px 0 5px 0; 
}
.phone-slider-home:hover{
	background-color: white;
}

.contact-form form{
	text-align: center;
}
.contact-form input{
	border-radius: 50px;
}
.contact-form input, .contact-form textarea{
    width: 500px;
    max-width: 100%;
}
.contact-form input{
	padding: 10px 15px 6px 15px;
    border-radius: 50px;
}
.contact-form textarea{
	padding: 10px 15px 6px 15px;
    border-radius: 20px;
}
.contact-form input[type=submit]{
	border:none;
	background-color: #004588;
	color: white;
	font-weight: bold;
	padding: 8px;
	margin-left: 72px;
}

/**
* Quarter Circles
*/

.diversification_quarters {
	position: relative;
    width: 20vw;
    height: 20vw;
    min-width: 250px;
    min-height: 250px;
    max-width: 340px !important;
    max-height: 340px !important;
    margin: 0 auto;
    transform: rotate(-18deg);
}

.quarter {
	position:absolute;
	width:50%;
	height:50%;
	transition:background-color 0.2s ease-in-out;
}
.quarter1 {
	top:0;
	left:0;
	border-radius:100% 0 0 0;
}
.quarter2 {
	top:0;
	right:0;
	background-color:#97d1ea;
	border-radius:0 100% 0 0 ;
}
.quarter3 {
	bottom:0;
	left:0;
	background-color:#306db5 ;
	border-radius:0 0 0 100%;
}
.quarter4 {
	bottom:0;
	right:0;
    background-color:#5bb0e0 ;
	border-radius:0 0 100% 0 ;
}
.quarter1-graissage{
    background-color:#a38dc2;
}
.quarter1-filtration{
    background-color:#90BD22 ;
}
.quarter1-hydraulique{
    background-color:#df4d25 ;
}
.cutout {
	width:70%;
	height:70%;
	background-color:white;
	position:absolute;
	top:15%;
	left:15%;
	border-radius:50%;
	pointer-events:none;
}
span.arrow {
	position: absolute;
    width: 20%;
    height: 20%;
    border-bottom: 18px solid white;
    border-right: 18px solid white;
}
.arrow1{
	top: 2px; 
	left: 49%; 
	transform: rotate(-45deg) translateX(-46%) translateY(-64%);
}
.arrow2{
	top: 47%; 
	right: -6px; 
	transform: rotate(45deg) translateX(-50%) translateY(-50%);
}
.arrow3{
	bottom: -5px;
    right: 47.5%;
    transform: rotate(135deg) translateX(-50%) translateY(-50%);
}
.arrow4{
	top: 46%;
    left: -6px;
    transform: rotate(-135deg) translateX(0%) translateY(0);
}
.text1,.text2,.text3,.text4{
	position: absolute;
	background-color: white;
	border-radius: 50%;
	width: 25px;
	height: 25px;
}
.text1{top: 16%;right: 16%;}
.text2{bottom:16%; right: 16%;}
.text3{bottom:16%; left: 16%;}
.text4{top: 16%;left: 16%;}
.text1 span,.text2 span,.text3 span,.text4 span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(18deg);
	font-family: "titillium web", sans-serif;
	font-weight: bold;
	color: #306db5;
}