/********************************************
* *****************  VARS  ******************
* ******************************************/
:root{

  --font-family:Work Sans;
  --font-family-second:Inter Tight;
  --font-family-third:Open Sans;

  --color-hardGrey:#040506;
  --color-hardGrey1:#3E3D3D;
  --color-hardGrey2:#2A2A2A; 
  --color-hardGrey3:#707070; 
  --color-Grey:#4A4A4A;
  --color-Grey1:#474747;
  --color-Green:#177D71;
  --color-GreyLight:#F4F4F4;
  --color-Red:#F21740;

  --color-Pro:#5295C9;
}
body.dark{
                                                  
}
/********************************************
* *****************  GENERAL  ***************
* ******************************************/
body, html{height:100%}
body, main > *{
  font-family: var(--font-family);
  font-size: 2rem;
}
a{
  text-decoration: none; 
}
a:not('.button'):hover{
  text-decoration: underline; 
  color:var(--color-white);
}

/********************************************
* *******************  SVG  *****************
* ******************************************/
svg.pictopro path:not(.fillWhite), svg.pictopro circle:not(.fillNone), svg.pictopro rect.fillGreen{
    fill:var(--color-Pro);
}
svg.pictopro line.strokeGreen, svg.pictopro g.strokeGreen{
  stroke:var(--color-Pro);
}
/********************************************
* *****************  SHADOW  ****************
* ******************************************/


/********************************************
* ***************  BACKGROUND  **************
* ******************************************/
                            

/********************************************
* ***************  BORDER  **************
* ******************************************/



/********************************************
* ****************  DIMENSIONS  *************
* ******************************************/
.wspecial270{width:calc(890px);}
.wspecial300{width:calc(1060px);}


/********************************************
* *****************  FONT  ******************
* ******************************************/
.ftWS{font-family: var(--font-family);}
.ftIT{font-family: var(--font-family-second);}
.ftOS{font-family: var(--font-family-third);}


 /********************************************
 * ****************  ACCORDION ***************
 * ******************************************/

 /********************************************
 * ****************  COLORS ***************
 * ******************************************/
.ftGreyHard{color:var(--color-hardGrey);}
.ftGreyHard1{color:var(--color-hardGrey1);}
.ftGrey{color:var(--color-Grey);}
.ftGrey1{color:var(--color-Grey1);}
.ftGreen{color:var(--color-Green);}
.ftBlue{color:var(--color-Pro);}
.ftGreyLight{color:var(--color-GreyLight);}
.ftRed{color:var(--color-Red);}


.backGreen{background-color: var(--color-Green);}
.backBlue{background-color: var(--color-Pro);}
.backGrey{background-color: var(--color-Grey);}
.backGreyHard{background-color: var(--color-hardGrey);}
.backGreyHard2{background-color: var(--color-hardGrey2);}
.backGreyLight{background-color: var(--color-GreyLight);}

.borderGreen{border-color: var(--color-Green);}
.borderBlue{border-color: var(--color-Pro);}
.borderGreyLight{border-color: var(--color-GreyLight);}
.borderGreyHard20{border-color: rgba(255,255,255,.2);}
.borderRed{border-color:var(--color-Red);}

.fillGreen{
  fill:var(--color-Green);
}
.strokeGreen{
  stroke:var(--color-Green);
}

.bshadow0320{box-shadow: 0px 3px 20px #00000029;}
/********************************************
* **************  AUTOCOMPLETE  *************
* ******************************************/



/********************************************
* **************  PROGRESS BAR  *************
* ******************************************/


/********************************************
* ******************  CTA  ******************
* ******************************************/

.CTA{
  border-radius:130px;
  padding: 5px 14px;
}
.CTA1{
  border-radius:4px;
  padding: 5px 14px;
}
.CTA2{
  border-radius:8px;
  padding: 5px 14px;
}
.CTA3{
  border-radius:30px;
  padding: 5px 20px;
}
.CTA4{
  border-radius:8px;
  padding: 10px 14px;
}

.CTAGreen{
  background: var(--color-Green);
  color:var(--color-white);
  border:2px solid var(--color-Green);
}
.CTAGreen:hover{
  background: transparent;
  color:var(--color-Green);
  border:2px solid var(--color-Green);
}
.CTAGreen:hover .fillWhite{
  fill:var(--color-Green);
}

.CTABlue{
  background: var(--color-Pro);
  color:var(--color-white);
  border:2px solid var(--color-Pro);
}
.CTABlue:hover{
  background: transparent;
  color:var(--color-Pro);
  border:2px solid var(--color-Pro);
}
.CTABlue:hover .fillWhite{
  fill:var(--color-Pro);
}



.CTAGreen1{
  background: var(--color-Green);
  color:var(--color-white);
  border:2px solid var(--color-white);
}
.CTAGreen1:hover{
  background: transparent;
  color:var(--color-Green);
  border:2px solid var(--color-Green);
}
.CTAGreen1:hover .fillWhite{
  fill:var(--color-Green);
}


.CTAGreenOutline{
  background: var(transparent);
  color:var(--color-Green);
  border:2px solid var(--color-Green);
}
.CTAGreenOutline:hover{
  background: var(--color-Green);
  color:var(--color-white);
  border:2px solid var(--color-Green);
}

.CTAGreyOutline{
  background: var(transparent);
  color:var(--color-hardGrey);
  border:2px solid var(--color-hardGrey);
}
.CTAGreyOutline:hover{
  background: var(--color-hardGrey);
  color:var(--color-white);
  border:2px solid var(--color-hardGrey);
}

.CTAGrey{
  background: var(--color-GreyLight);
  color:var(--color-Green);
  border:2px solid var(--color-GreyLight);
}
.CTAGrey:hover{
  background: transparent;
  color:var(--color-Green);
  border:2px solid var(--color-Green);
}

.CTAWhite{
  background: var(--color-white);
  color:var(--color-hardGrey);
  border:2px solid var(--color-Green);
}
.CTAWhite:hover{
  background: transparent;
  color:var(--color-white);
  border:2px solid var(--color-white);
}

a.ftGreyHard:hover{
  color: var(--color-Green);
}
.sectionpro a.ftGreyHard:hover{
  color: var(--color-Pro);
}
a.ftGreyHard.pictopro:hover{
  color: var(--color-Pro);
}

/********************************************
* *****************  ELEMENT ****************
* ******************************************/
.stepBloc{
  background-color: var(--color-white);
  color:var(--color-Green);
}
.steptxt{
  color:var(--color-Grey);
}

.active .stepBloc{
  background-color: var(--color-Green);
  color:var(--color-white);
}
.active .steptxt{
  color:var(--color-Green);
}


.searchfield.active{ 
  background:var(--color-Green)!important;
  color:var(--color-white)!important; 
}

option:checked {
  background-color: var(--color-Green)!important;
  color:var(--color-white)!important; 
}

option:not(:checked) {
  background-color: var(--color-white)!important;
  color:var(--color-Green)!important; 
}

.itemBordered{
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-Green);
}

.specialW1{width:calc(100% - 310px)}
.fullscreen{
  position: absolute;
  bottom:90px;
  right:calc((100vw - 1400px)/2);
  height:48px;
  width:48px;
  cursor: pointer;
  z-index: 1;
}
.separator{
  width:33%;
  background-color: var(--color-Green);
  height:1px;
  margin: 60px auto;
}
.separator1{
  width:33%;
  background-color: var(--color-Green);
  height:1px;
  margin: 30px auto 60px auto;
}
.separator1.pictopro{
  background-color: var(--color-Pro);
}
.separator2{
  width:50px;
  background-color: var(--color-Green);
  height:2px;
  margin: 5px 0;
}
.separator2.pictopro{
  background-color: var(--color-Pro);
}
.separator3{
  width:100%;
  background-color: var(--color-Green);
  height:2px;
  margin: 5px 0;
}
.separator3.pictopro{
  background-color: var(--color-Pro);
}
.separator4{
  width:80%;
  background-color: var(--color-Green);
  height:2px;
  margin: 5px 0;
}
.separator5{
  width:50px;
  background-color: var(--color-Green);
  height:5px;
  margin: 10px 0;
}
.separator6{
  width:33%;
  background-color: var(--color-Green);
  height:1px;
  margin: 10px auto 20px ;
}
.separator7{
  width:100%;
  background-color: var(--color-Green);
  height:2px;
}
.separator8{
  width:33%;
  background-color: var(--color-Green);
  height:2px;
  margin: 20px auto 40px auto;
}
.triangle-grey{
 display : inline-block;
 height : 0;
 width : 0;
 border-top : 150px solid var(--color-GreyLight);
 border-right : 1900px solid transparent;
}
.itemvehicule{
}

.accordion {
  background: var(--color-white);
  transition: all 1s;
}
/* Style the arrow inside the select element: */
.accordion:after {
  position: absolute;
  content: url('../content/static/arrowg.svg');
  top: 32px;
  right: 10px;
  width: 0;
  height: 0;
  transform: rotate(180deg)
  /*border: 6px solid transparent;
  border-color: var(--color-hardGrey) transparent transparent transparent;*/
}

.accordion.accordion-activated:after {
  transform: translate(-16px, -30px) rotate(0deg)
}

.modal-content {
  border-radius: 1.5rem;
}
.modal-content:not(.noborder) {
  border: 4px solid var(--color-Green);
}
.modal-content.noborder {
  background-color: transparent!important;
  border: none!important;
}

.modal-content .modal-container{
  border-radius: 1.5rem;
  background: #FFF;
  overflow:hidden;
}
.tilemine{
  background:var(--color-GreyLight);
  height:5px;
  width: 100%;
}
.specialtitle{
  opacity: .6;
  background-color: #D2C561;
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.specialtitle.pictopro{
  background-color: var(--color-Pro);
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 3px; /* Specified height */
  background: transparent; /* Grey background */
  outline: none; /* Remove outline */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  position: relative;
  z-index: 3;
}

/* Mouse-over effects */
.slider:hover {
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 14px; /* Set a specific slider handle width */
  height: 14px; /* Slider handle height */
  background: var(--color-Green); /* Green background */
  cursor: pointer; /* Cursor on hover */
  border:none;
  border-radius: 50%;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-runnable-track {

}

.slider::-moz-range-thumb {
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: var(--color-Green); /* Green background */
  cursor: pointer; /* Cursor on hover */
  border:none;
}
.slider.pictopro::-moz-range-thumb {
  background: var(--color-Pro); /* Pro background */
}
.slideblind{
  background:var(--color-Green);
  width: 0; /* Full-width */
  height: 3px; /* Specified height */
  top:16px;
  z-index: 3;
  left: 5px;
}
.slideblind.pictopro{
  background:var(--color-Pro);
}

.slideback{
  background:#E5E5E5;
  width: calc(100% - 10px); /* Full-width */
  height: 3px; /* Specified height */
  top:16px;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}

.slidesteps{
  top:13px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: calc(100% - 10px); /* Full-width */
  left: 50%;
  transform: translateX(-50%);
}
.slidestep{
  background:#E5E5E5;
  width: 1px; /* Full-width */
  max-width: 1px; /* Full-width */
  height: 8px; /* Specified height */
  background:var(--color-Green);
}

/********************************************
* *****************  SWIPER ****************
* ******************************************/
.swiper-slide {height: auto!important;}
.swiper_slide_content{height: 100%}
.swiper-slide .backContent{
  position: absolute;
  width: 100%;
  z-index: 2;
}
.backoverlay{
  background: #070707 0% 0% no-repeat padding-box;
  opacity: 0.39;
  position: absolute;
  width: 100%;
  height:100%;
  z-index: 1;
}
.blocFixed{
  
}
.modal-body iframe{
  min-height:250px;
  transition: all .5s ease-out;
}

/********************************************
* *****************  DROPZONE ***************
* ******************************************/



/********************************************
* *******************  MODAL ****************
* ******************************************/
.modal-header, .modal-footer {
  border: 0 none;
}


/********************************************
* ******************  FIELD *****************
* ******************************************/
.inputBox {
  position: relative;
}
.inputBox span {
  position: absolute;
  left: 0;
  padding: 10px;
  pointer-events: none;
  font-size: 1.2rem;
  color: var(--color-black);
  transition: 0.5s;
  top: 4px;
}
.inputBox input:valid ~ span, .inputBox p.disabled ~ span, .inputBox input.disabled ~ span, .inputBox textarea:valid ~ span, .inputBox select:valid ~ span, .inputBox input:focus ~ span, .inputBox textarea:focus ~ span, .inputBox select:focus ~ span, .inputBox select:disabled ~ span {
  color: var(--color-black);
  /*transform: translateX(10px) translateY(-7px);*/
  font-size: 1.2rem;
  padding: 0 11px;
  background: var(--color-blue);
}
label.radiofield, label.checkboxfield {
  position:relative;
  display: flex;
  align-items: center;
}
label.radiofield input, label.checkboxfield input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

label.radiofield input:checked ~ .checkmark::after, label.checkboxfield input:checked ~ .checkmark::after  {
  background: var(--color-Green);
}
label.radiofield input.pictopro:checked ~ .checkmark::after, label.checkboxfield input.pictopro:checked ~ .checkmark::after  {
  background: var(--color-Pro);
}

label.radiofield input:checked ~ .checkmark1::after, label.checkboxfield input:checked ~ .checkmark1::after  {
  background: var(--color-Green);
  border: var(--color-white) solid 3px;
}

label.radiofield input.pictopro:checked ~ .checkmark1::after  {
  background: var(--color-Pro);
  border: var(--color-white) solid 2px;
}

.checkmark {
  font-family: "Font Awesome 5 Free";
  content: '\f0c8';
  font-size: 1rem;  
  margin-right: 0.3rem  ;
  width: 13px;
  height: 13px;
  display: inline-block;
  font-weight: 900;
  border: var(--color-hardGrey3) solid 2px;
  border-radius: 50%;
  position:relative;
}

.checkmark1 {
  font-family: "Font Awesome 5 Free";
  content: '\f0c8';
  font-size: 1rem;  
  margin-right: 0.3rem  ;
  width: 18px;
  height: 18px;
  display: inline-block;
  font-weight: 900;
  border: var(--color-white) solid 2px;
  border-radius: 50%;
  position:relative;
  background: #FFFFFF;
}

.checkboxmark {
  font-family: "Font Awesome 5 Free";
  content: '\f0c8';
  font-size: 1rem;
  margin-right: 0.3rem;
  width: 15px;
  height: 15px;
  display: inline-block;
  font-weight: 900;
  border: var(--color-hardGrey3) solid 1px;
  border-radius: 30%;
  position: relative;
}

 input.error ~ .checkmark,  input.error ~ .checkmark1,  input.error ~ .checkboxmark {
  border: var(--color-red) solid 2px;
}
label.radiofield input:checked ~ .checkmark::before, label.radiofield input:checked ~ .checkmark1::before, label.checkboxfield input:checked ~ .checkboxmark::before {
    display: block;
}
label.radiofield .checkmark::before, label.radiofield .checkmark1::before, label.checkboxfield .checkboxmark::before {
    left: 0px;
    width: 9px;
    height: 9px;
    background: transparent;
    content: "";
    position: absolute;
}

label.radiofield input:checked ~ .checkmark, label.radiofield input:checked ~ .checkmark1, label.checkboxfield input:checked ~ .checkboxmark {
  border: var(--color-Green) solid 2px;
}

label.radiofield input.pictopro:checked ~ .checkmark, label.radiofield input.pictopro:checked ~ .checkmark1, label.checkboxfield input.pictopro:checked ~ .checkboxmark{
  border: var(--color-Pro) solid 2px;
}

label.radiofield input:checked ~ .checkmark::after, label.checkboxfield input:checked ~ .checkboxmark::after {
    top: 0px;
    left: 0px;
    width: 9px;
    height: 9px;
    content: "";
    position: absolute;
    border-radius: 50%;
}
label.radiofield input:checked ~ .checkmark1::after {
    top: -4px;
    left: -2px;
    width: 18px;
    height: 18px;
    content: "";
    position: absolute;
    border-radius: 50%;
}
.searchForm select{
  background: var(--color-white);
  border-color: var(--color-white);
  color:var(--color-hardGrey);
  padding: 12px 14px;
  font-size: 1.5rem;
  font-family: var(--font-family);
  font-weight: 500;
}
.searchForm1 select{
  background: var(--color-white);
  border: 1px solid var(--color-Green);
  color:var(--color-hardGrey);
  padding: 12px 14px;
  font-size: 1.5rem;
  font-family: var(--font-family);
  font-weight: 500;
}

.fieldoutline{
  border: 1px solid var(--color-Grey1);
  border-radius:15px;
  padding: 15px 20px;
}

.fieldoutlineGreen{
  border: 1px solid var(--color-Green);
  border-radius:15px;
  padding: 15px 20px;
}

.fieldoutlineBlue{
  border: 1px solid var(--color-Pro);
  border-radius:15px;
  padding: 15px 20px;
}

input.error{
  border: 1px solid var(--color-Red);
}

 /* The container must be positioned relative: */
.custom-select {
  position: relative;
  font-family: var(--font-family);
  /*padding: 12px 14px;*/
  font-size: 1.5rem;
  font-family: var(--font-family);
  font-weight: 500;
  border:1px solid var(--color-Green);
}
.custom-select.error{
  border:1px solid var(--color-Red);
}
.custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background: var(--color-white);
}
.select-selected-activated{
  background:var(--color-Green)!important;
  color:var(--color-white)!important; 
}
.select-selected-activated:after {
  content: url('../content/static/arrow.svg') !important;
  transform: rotate(180deg)
}
/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: url('../content/static/arrowg.svg');
  top: 32px;
  right: 10px;
  width: 0;
  height: 0;
  transform: rotate(180deg)
  /*border: 6px solid transparent;
  border-color: var(--color-hardGrey) transparent transparent transparent;*/
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  transform: rotate(0deg);
  top: 10px;
  right: 27px;
  
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color:var(--color-hardGrey);
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  text-align: left;
  text-transform: uppercase;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: var(--color-white);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border:1px solid var(--color-Green);
  max-height: 500px;
  overflow-y: auto;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(23, 125, 113, 0.11);
} 



/********************************************
* ***************  photon-input ************
* ******************************************/


/********************************************
* ***************  MEDIA QUERIES ************
* ******************************************/
/*LG devices (portrait phones, less than 576px)*/
@media (max-width: 1399.98px) {
  .fullscreen{
    right:calc((100vw - 1199.98px)/2);
  }
}

/*MD devices (portrait phones, less than 576px)*/
@media (max-width: 1199.98px) {
  .fullscreen{
    right:calc((100vw - 991.98px)/2);
  }
}

/*SM devices (portrait phones, less than 576px)*/
@media (max-width: 991.98px) {
  .fullscreen{
    right:calc((100vw - 767.98px)/2);
  }
 
}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {  
  .fullscreen{
    right:calc((100vw - 575.98px)/2);
  }
.wspecial300{width:100%;}
  .separator1{    
    margin: 30px auto;
  }
  .wspecial270{width: 100%}
}

/*X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {  
  .fullscreen{
    right:calc((100vw - 390.98px)/2);
  }
}