.services .title {
  padding-bottom: 1%;
}

.services .service-title {
  font-size:  var(--clFontSizeMediumPlusPlus);
  font-weight: 500;
  margin: 5% 0;
}

.services .service-text {
  font-size: var(--clFontSizeSmallPlus);
  margin: 0;
  text-align: justify;
  color: var(--clColorGray);
  transition: 300ms;
}

.services .service {
  padding: 3%;
  width: 50%;  
  text-align: center;
  transition: 300ms;
}

.services .service-link {
  /*
  color: #FF9600;
  border: 1px solid #FF9600;
  padding: 8px 14px;
  */
}

.services .service-link.invert {
  /*color: #FFFFFF;*/
  border: 0;
  display: inline-flex;
  /*background-color: #2056AC;*/
}

.services .service-link.dark {
  /*
  color: #00305C;
  border: 1px solid #00305C;
  */
}

.services .service-details {
  width: 45%;
  padding: 0 50px;
  font-size: var(--clFontSizeSmall);
  list-style-type: none;
}


.services .service-link-img-container {
  margin-top: 10%;
}

.services .service-link-img {
  /*
  color: white;
  background: #2056AC !important;
  border-color: #2056AC !important;
  */
}

.services .service-link:hover, .services .service-link-img:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.services .service-link-img:hover {
  transform: scale(1.05);
}

.services .service-title-img {
  font-weight: 500;
}

#services-img-container {
  padding: 3% 0 0 0;
  position: relative;
  margin-top: max(-10vw,-150px)
}

#services-img-container .skew-bg {
  /*background-color: #f5f5f5;*/
}

#services-img-container .skew-bg.before {
  /*border-top-color: #FAFAFA;*/
}

.services .services-row {
  display: flex;
}

.services .row-2 .service {
  width: 100%;
}

.services .services-row-img {
  display:  flex;
}

.services .service-description-container-img {
  width: 100%;
}

.services .services-row-img.odd .service-description-container-img {
  margin-right: 5%;
  text-align: right;
}

.services .services-row-img.even .service-description-container-img {
  margin-left: 5%;
}

.services .service-image-img {
  height: fit-content;
  overflow: hidden;
  transition: 1500ms;
  border-radius: 7px;
}

.services .service-image-img img {
  width: 100%;
  height: 100%;
}

.services-row-img .service-image-img img {
  transition: transform 600ms, filter .3s ease-out;
  transition-delay: 150ms;
}

.services .service-image-img img:hover {
    transform: scale(1.05);
}
.services .animate-json.hover {
  width: fit-content;
  max-width: 240px;
}

.services .service-image img, .services .animate-json.hover {
  height: 5em;
  transition: 300ms;
  margin: auto;
}

@media only screen and (max-width: 1024px) {
  .services .service-text-container-medium {
    min-height: 25.5vw;
  }
}

@media only screen and (max-width: 900px) {
  .services .services-row-img,  .services .services-row {
    flex-wrap: wrap;
  }
  
  .services .service-text-container {
    min-height: 0 !important;
  }
  
  #services-img-container {
    margin-top: -12vw;
  }
  .services .services-row-img.even {
    flex-direction: column-reverse;
  }
  
  .services .services-row-img {
    /*border: 1px solid #29c2de;*/
    padding: 5vw;
  }
  
  .services .title {
    padding-bottom: 3%;
  }
  
  .services .services-row-img {
    margin-bottom: 5vw;
  }
  
  .services .services-row-img:last-of-type {
    margin-bottom: 0;
  }
  
  .services .services-row-img.odd .service-description-container-img, .services .services-row-img.even .service-image-img {
    padding-right: 0;
  }
  
  .services .service-title-img {
    padding-bottom: 4vw;
  }
  
  .services .services-row-img.odd .service-description-container-img, .services .services-row-img.even .service-description-container-img {
    padding-bottom: 6vw;
  }

  .services .service-description-container-img, .services .service-title-img {
    max-width: 90%;
    text-align: center !important;
    margin: auto;
  }
  
  .services .service-title {
    margin: 2% 0;
  }
  
  .services .service {
    width: 100%;
    margin: 7% 0;
    text-align: center;
  }
  
  .services .service-image img, .services .animate-json.hover {
    height: 14vw;
  }

  .services .service-text-container-medium {
    min-height: 0;
  }
  
  .services .service-link, .services .service-link.dark {
    margin-top: 4vw;
  }
  
  .services .service-image img {
    margin-left: auto;
    width: 30vw;
  }
  
  .services .animate-json.hover {
    margin: auto;
  }
}

@media only screen and (max-width: 800px) {
  .services .service-title {
    font-size: var(--clFontSizeLarge);
  }
  
  .services .service-text {
    font-size: var(--clFontSizeNormal);
  }
  
  .services .service-link img{
    width: initial;
    padding-left: 1vw;
  }
  
}

@media only screen and (max-width: 600px) {
  #services-img-container {
    margin-top: -14vw;
  }
  
  .services .service-title-img {
    padding-bottom: 5vw;
  }
  
  .services .service-image img, .services .animate-json.hover {
    height: max(20vw,100px);
  }
  
  .services .service-link {
    padding: 2vw 4vw;
  }
}

@media only screen and (max-width: 500px) {
  #services-img-container {
    margin-top: -18vw;
  }
}

@media only screen and (max-width: 400px) {
  #services-img-container {
    margin-top: -23vw;
  }
}

@media only screen and (max-width: 350px) {
  #services-img-container {
    margin-top: -23vw;
  }
}