/* ========================================
  Background colors
======================================== */
.bg-banner {
  background: #E1E1E1;
}

/* ========================================
  Gradients
======================================== */
.gradient-cleaning { background: linear-gradient(0deg, #E7E7E7 0%, rgba(232, 232, 232, 0) 50%); }
.gradient-quality { background: linear-gradient(0deg, #E1E1E1 0%, rgba(232, 232, 232, 0) 0%); }

.bg-gradient-grey { background: linear-gradient(360deg, #E7E7E7 0%, rgba(232, 232, 232, 0.5) 40%, rgba(232, 232, 232, 0) 70%); }
.bg-gradient-bfooter { background: linear-gradient(360deg, #B7B7B7 0%, rgba(244, 244, 244, 0) 100%); }
.scrollmagic-pin-spacer { background: linear-gradient(360deg, #B7B7B7 0%, rgba(244, 244, 244, 0) 100%); }


/* ========================================
  Clip-path
======================================== */
.ellipse-bottom {
  clip-path: ellipse(100% 100% at 50% 0%);
  -webkit-clip-path: ellipse(100% 100% at 50% 0%);
}

.ellipse-contactBottom {
  clip-path: ellipse(60% 100% at 50% 0%);
  -webkit-clip-path: ellipse(60% 100% at 50% 0%);
}

.ellipse-top {
  clip-path: ellipse(130% 100% at 50% 100%);
  -webkit-clip-path: ellipse(130% 100% at 50% 100%);
}

.inset {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

.ellipse-custom {
  position: absolute;
  top: 0px;
  height: 115px;
  width: 100vw;
  z-index: 1;
}

/* ========================================
  Text position
======================================== */
.til-qualities {
  position: relative;
  top: -30px;
  left: 35px;
}

.txt-quality {
  position: relative;
  top: 100px;
  z-index: 2;
}

/* ========================================
  Dots
======================================== */
.dot {
  border-radius: 50%;
  height: 12px;
  width: 12px;
  margin-right: .5rem;
}

.dot-blue { background-color: #0094FF; }
.dot-red { background-color: #FF0000; }
.dot-yellow { background-color: #FFB800; }
.dot-green { background-color: #5ACD00; }

/* ========================================
  Hr
======================================== */
.hr-bcWhite { border-color: white; }
.hr-serviceProcess { 
  border-color: #000;
  position: relative;
  left: -97px;
  top: 13px;
  min-width: 290px;
}

/* ========================================
  Buttons
======================================== */
.btn {
  font-size: 13px;
  font-weight: 700;
  min-height: 33px;
  min-width: 135px;
}

/* ========================================
  Contents
======================================== */
.circle-icon {
  background-color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66px;
  width: 66px;
}

.content-qualities {
  border-radius: 10px;
  overflow: hidden;
}

/* ========================================
  Wrappers
======================================== */
.wrapper-qualities {
  background: rgba(0, 0, 0, 0.8);
  height: 523px;
  padding: 7rem 8rem 0rem 8rem;
}

.wrapper-infoContact {
  padding: 2rem 2rem 0rem 2rem;
}

.wrapper-quality { padding: 0rem 6.5rem; }

/* ========================================
  Form
======================================== */
.form-note {
  position: fixed;
  z-index: 1202;
  bottom: 0px;
  left: 0;
  width: 100%;
  display: block;
  color: #ffffff;
  font-size: 16px;
  line-height: 20px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -khtml-border-radius: 2px;
  -webkit-border-radius: 2px;
  text-align: center;
}

.form-confirm {
  background: #FFC700;
  padding: 18px 0px 18px 0px;
  width: 100%;
}

.form-alert {
  background: #b30000;
  padding: 18px 0px 18px 0px;
  width: 100%;
}

.field-error { border: 1px solid #b30000 !important; }

/* ========================================
  Maps
======================================== */
.heightMap { height: 510px; }

.position-map {
  position: absolute;
  top: 60px;
  min-width: 100%;
  /*z-index: -1;*/
}

.map-contact {
  min-height: 450px;
}

.animated-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  top: -10px;
  right: 8px; 
}

.animated-dot:before, .animated-dot:after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: auto;
  transform: scale(0.5);
  transform-origin: center center;
  animation: pulse-me 3s linear infinite; 
}

.animated-dot:after {
  animation-delay: 2.4s; 
}

@keyframes pulse-me {
  0% {
    transform: scale(0.5);
    opacity: 0; 
  }
  50% { opacity: 0.1; }
  70% { opacity: 0.09; }
  100% {
    transform: scale(16);
    opacity: 0; 
  } 
}

/* ========================================
  Special padding 
======================================== */
.p-communicate { padding: 8rem 1rem; }
.p-txtCommunicate { padding: 0rem 6rem 0rem 0rem; }
.p-we { padding: 0rem 12rem 0rem 5rem; }
.p-banner { padding: 0rem 5rem 0rem 7rem; }
.p-cleaning { padding: 0rem 15rem 0rem 5rem; }

.p-serviceProcess { padding: 4rem 1rem; }

@media (max-width: 1199.98px) {

  /* ========================================
    Text position
  ======================================== */
  .txt-quality { top: 90px; }

  /* ========================================
    Hr
  ======================================== */
  .hr-serviceProcess { 
    left: -77px;
    min-width: 230px;
  }

  /* ========================================
    Wrappers
  ======================================== */
  .wrapper-qualities {
    height: 523px;
    padding: 6rem 6rem 0rem 6rem;
  }

  .wrapper-quality { padding: 0rem 3rem; }

  /* ========================================
    Special padding 
  ======================================== */
  .p-txtCommunicate { padding: 0rem 4rem 0rem 1rem; }
  .p-we { padding: 0rem 4rem; }
  .p-banner { padding: 0rem 3rem; }
  .p-cleaning { padding: 0rem 7rem 0rem 4rem; }
  

}

@media (max-width: 991.98px) {

  /* ========================================
    Gradients
  ======================================== */
  .gradient-quality { background: linear-gradient(0deg, #E1E1E1 0%, rgba(232, 232, 232, 0) 25%); }

  /* ========================================
    Text position
  ======================================== */
  .txt-quality { top: 75px; }

  /* ========================================
    Hr
  ======================================== */
  .hr-serviceProcess { 
    left: -67px;
    min-width: 200px;
  }

  /* ========================================
    Wrappers
  ======================================== */
  .wrapper-qualities {
    padding: 5rem 4rem 0rem 5rem;
  }

  .wrapper-quality { padding: 0rem 2rem; }

  /* ========================================
    Special padding 
  ======================================== */
  .p-txtCommunicate { padding: 0rem 24rem 0rem 1rem; }
  .p-we { padding: 0rem 3rem; }
  .p-banner { padding: 0rem 2rem; }
  .p-cleaning { padding: 0rem 3.5rem; }
  

}

@media (max-width: 831px) {

  /* ========================================
    Text position
  ======================================== */
  .txt-quality { top: 95px; }

}

@media (max-width: 767.98px) {

  /* ========================================
    Gradients
  ======================================== */
  .gradient-quality { background: linear-gradient(0deg, #E1E1E1 0%, rgba(232, 232, 232, 0) 50%); }

  /* ========================================
    Clip-path
  ======================================== */
  .ellipse-bottom {
    clip-path: ellipse(130% 100% at 50% 0%);
    -webkit-clip-path: ellipse(130% 100% at 50% 0%);
  }

  .ellipse-top {
    clip-path: ellipse(150% 100% at 50% 100%);
    -webkit-clip-path: ellipse(150% 100% at 50% 100%);
  }

  /* ========================================
    Text position
  ======================================== */
  .txt-quality { top: 50px; }

  /* ========================================
    Hr
  ======================================== */
  .hr-serviceProcess { 
    left: -74px;
    min-width: 250px;
  }

  /* ========================================
    Wrappers
  ======================================== */
  .wrapper-qualities { padding: 5rem 7rem 0rem 7rem; }

  .wrapper-quality { 
    min-height: 300px;
    padding: 3rem 1rem; 
  }

  .wrapperJenny { padding: 7.5rem 0rem; }

  /* ========================================
    Special padding 
  ======================================== */
  .p-txtCommunicate { padding: 0rem 4rem 0rem 1rem; }
  .p-we { padding: 0rem 2rem; }
  .p-banner { padding: 3rem 1rem; }
  .p-cleaning { padding: 0rem 2rem; }
  

}

@media (max-width: 575.98px) {

  /* ========================================
    Clip-path
  ======================================== */
  .ellipse-bottom {
    clip-path: ellipse(150% 100% at 50% 0%);
    -webkit-clip-path: ellipse(150% 100% at 50% 0%);
  }

  .ellipse-top {
    clip-path: ellipse(170% 100% at 50% 100%);
    -webkit-clip-path: ellipse(170% 100% at 50% 100%);
  }

  /* ========================================
    Wrappers
  ======================================== */
  .wrapper-qualities {
    padding: 4rem 4rem 0rem 4rem;
  }

  .wrapper-quality { 
    min-height: 365px;
  }

  .wrapperJenny { padding: 15.5rem 0rem; }

  /* ========================================
    Special padding 
  ======================================== */
  .p-txtCommunicate { padding: 0rem 1rem; }
  .p-we { padding: 2rem 1rem 4rem 1rem; }
  .p-cleaning { padding: 2rem 1rem 4rem 1rem; }
  

}

@media (max-width: 500px) {

  /* ========================================
    Wrappers
  ======================================== */
  .wrapperJenny { padding: 7.3rem 0rem; }

}

@media (max-width: 450px) {

  /* ========================================
    Wrappers
  ======================================== */
  .wrapperJenny { padding: 5.8rem 0rem; }

}

@media (max-width: 400px) {

  /* ========================================
    Wrappers
  ======================================== */
  .wrapper-qualities {
    height: 100%;
    min-height: 1px;
    padding: 5rem 2rem 5rem 2rem;
  }

  .wrapperJenny { padding: 7rem 0rem; }

}