.light_grey {
  fill: #e3e3e3;
}

.xenon_yellow {
  fill: #ffb900;
}

.dark_grey {
  fill: #706f6e;
  font-family: 'formata';
}

.x-service:hover .light_grey,
.x-service.active-service .light_grey {
  fill: #706f6e;
}

.x-service:hover .dark_grey,
.x-service.active-service .dark_grey {
  fill: #ffffff;
}

.x-service:hover .xenon_yellow,
.x-service.active-service .xenon_yellow {
}

.Overall_Headline {
  font-size: 16px;
  font-family: 'Lato';
  margin: 1.25em 0.2em 0 0em;
}

.Tech_Headline {
  font-size: 26px;
  font-family: 'Lato';
  margin-bottom: 10px;
  margin-top: 5px;
  color: #ffb900;
}

.Tech_Text {
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

.Tech_Text p {
  margin-top: 5px;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0em;
  text-transform: none;
  color: rgba(0, 0, 0, 1);
}

.Tech_Gallery {
  width: 100%;
  max-width: 435px;
}

.portfolio_slider .owl-dots {
  position: relative;
  margin-top: 10px;
  margin-bottom: 0px;
}

.Tech_Gallery img {
  width: 100%;
}

.Tech_Sub {
  font-family: 'Lato', sans-serif;
}

.Tech_Sub span {
  display: block;
  float: left;
  background: rgba(112, 113, 114, 0.3);
  color: #000;
  margin-top: 10px;
  margin-right: 10px;
  padding: 5px 15px 5px 15px;
  text-align: center;
  cursor: pointer;
}

.Tech_Sub span:hover {
  background: #ffb900;
  color: #000;
}

.Tech_More {
  margin-top: 10px;
}

a.more {
  margin-top: 10px;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0em;
  text-transform: none;
  color: #ffb900;
}

.btn-cta {
  cursor: pointer;
}

.btn-vis {
  display: inline-block;
  background: rgb(243, 243, 243);
  color: grey;
  cursor: pointer;
  padding: 5px 10px;
  margin-right: 5px;
  font-size: 12px;
}

.buttons {
  position: absolute;
  bottom: 0;
  z-index: 9999;
}

#X-Service .x-service {
  transform: scale(0);
  transform-origin: center center;
  transition: all 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

#X-Service.loaded .x-service {
  transform: scale(1);
  transform-origin: center center;
  transition: all 0.3s ease-in-out;
  transition-delay: 0.5s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.btn-cta.x-service.hide {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.btn-cta.x-service.active-service,
.btn-cta.x-service:hover {
  opacity: 1;
  transition: all 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#assembly.modal-all.onload {
  opacity: 1;
  transition: opacity 0.6s ease;
  transition-delay: 2.3s;
  visibility: visible;
}

#assembly.modal-all.onstart {
  opacity: 1;
  transition: opacity 0.6s ease;
  visibility: visible;
}

/*//SVG///*/

#XE_Tech_Circle {
  width: 100%;
  height: auto;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 50px;
  position: absolute;
  z-index: 1;
}

.service_mittelkreis {
  position: absolute !important;
  z-index: 999;
  transform: scale(0);
  transform-origin: center center;
  transition: all 0.3s ease-in-out;
}

.service_mittelkreis.active {
  fill: #ffb500;
  transform: scale(1);
  transform-origin: center center;
  transition: all 0.3s ease-in-out;
}

.service_mittelkreis.active:hover {
  transform: scale(1.05);
  transform-origin: center center;
  transition: all 0.3s ease-in-out;
}

#back_circle.dark-grey.active {
  width: 100%;
  height: 100%;
  stroke: #fff;
  stroke-width: 0px;
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0));
  transition: all 0.3s ease-in-out;
  /*animation: bounce_back_circle .9s;*/
  transform: scale(1);
  fill: #707172;
  transform-origin: center center;
}

#Torte_Injection.dark-grey.active,
#Torte_Robot.dark-grey.active,
#Torte_Assembly.dark-grey.active,
#Torte_Digital.dark-grey.active,
#Torte_Inspection.dark-grey.active {
  width: 100%;
  height: 100%;
  stroke: #fff;
  stroke-width: 0px;
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0));
  transition: all 0.3s ease-in-out;
  /*animation: bounce .9s;*/
  transform: scale(1.07);
  fill: #707172;
  transform-origin: center center;
}

/*@keyframes bounce {*/
/*  0% { transform: scale(0.0); opacity: 0 }*/
/*  50% { transform: scale(0.503); opacity: 0 }*/
/*  100% { transform: scale(1.07); opacity: 1 }*/
/*}*/
/**/
/*@keyframes bounce_back_circle {*/
/*  0% { transform: scale(0.0); opacity: 0 }*/
/*  50% { transform: scale(0.503); opacity: 0 }*/
/*  100% { transform: scale(1.00); opacity: 1 }*/
/*}*/

a.active-service #Torte_Injection.dark-grey.active,
a.active-service #Torte_Robot.dark-grey.active,
a.active-service #Torte_Assembly.dark-grey.active,
a.active-service #Torte_Digital.dark-grey.active,
a.active-service #Torte_Inspection.dark-grey.active,
#Torte_Injection.dark-grey.active:hover,
#Torte_Robot.dark-grey.active:hover,
#Torte_Assembly.dark-grey.active:hover,
#Torte_Digital.dark-grey.active:hover,
#Torte_Inspection.dark-grey.active:hover {
  width: 100%;
  height: 100%;
  transform: scale(1.12);
  transform-origin: center center;
  /*transition: all 0.3s ease-in-out;*/

  fill: #e3e3e2;
  stroke: #fff;
  stroke-width: 0px;
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}

#Torte_Injection.dark-grey.active text,
#Torte_Robot.dark-grey.active text,
#Torte_Assembly.dark-grey.active text,
#Torte_Digital.dark-grey.active text,
#Torte_Inspection.dark-grey.active text {
  transition: fill 0.1s ease;
  fill: #fff;
}

a.active-service #Torte_Injection.dark-grey.active text,
a.active-service #Torte_Robot.dark-grey.active text,
a.active-service #Torte_Assembly.dark-grey.active text,
a.active-service #Torte_Digital.dark-grey.active text,
a.active-service #Torte_Inspection.dark-grey.active text,
#Torte_Injection.dark-grey.active:hover text,
#Torte_Robot.dark-grey.active:hover text,
#Torte_Assembly.dark-grey.active:hover text,
#Torte_Digital.dark-grey.active:hover text,
#Torte_Inspection.dark-grey.active:hover text {
  /*transition: fill 0.3s ease-in-out;*/
  fill: #707172;
  font-weight: 500;
}

.dark-grey.active {
  transition: fill 0.1s ease;
  fill: #fff;
}

a.active-service .dark-grey.active,
a.active-service .dark-grey.active,
a.active-service .dark-grey.active,
a.active-service .dark-grey.active,
a.active-service .dark-grey.active,
.dark-grey.active:hover,
.dark-grey.active:hover,
.dark-grey.active:hover,
.dark-grey.active:hover,
.dark-grey.active:hover {
  /*transition: fill 0.3s ease-in-out;*/
  fill: #707172;
}

.circle_out {
  fill: none;
  stroke: #e3e3e2;
  stroke-width: 0px;
  stroke-dasharray: 2545;
  stroke-dashoffset: 2500;
  -webkit-animation: dash 3.2s linear forwards;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-delay: 1.8s;
}

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

#X-Service #Cooling_Icon {
  transform: scale(0);
  transform-origin: 460px 45.71px;

  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Cooling_Icon {
  transform: scale(1);
  transform-origin: 460px 45.71px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 700ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.cooling_hover {
  transform: scale(1);
  transform-origin: 440px 45.71px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.cooling_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 440px 45.71px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service #Cleaning_Icon {
  transform: scale(0);
  transform-origin: 663.35px 97.42px;

  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Cleaning_Icon {
  transform: scale(1);
  transform-origin: 663.35px 97.42px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 820ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.cleaning_hover {
  transform: scale(1);
  transform-origin: 663.35px 97.42px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.cleaning_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 663.35px 97.42px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service #Dispensing_Icon {
  transform: scale(0);
  transform-origin: 812.2px 247.98px;

  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Dispensing_Icon {
  transform: scale(1);
  transform-origin: 812.2px 247.98px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 940ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.dispensing_hover {
  transform: scale(1);
  transform-origin: 812.2px 247.98px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.dispensing_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 812.2px 247.98px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service #Handling_Icon {
  transform: scale(0);
  transform-origin: 867.82px 450.19px;

  /*transition-property: transform */
  transition: all 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Handling_Icon {
  transform: scale(1);
  transform-origin: 867.82px 450.19px;

  transition: all 0.3s ease-in-out;
  transition-delay: 1060ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.handling_hover {
  transform: scale(1);
  transform-origin: 867.82px 450.19px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.handling_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 867.82px 450.19px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service #Identify_Icon {
  transform: scale(0);
  transform-origin: 812.2px 654.45px;

  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Identify_Icon {
  transform: scale(1);
  transform-origin: 812.2px 654.45px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 1180ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.identify_hover {
  transform: scale(1);
  transform-origin: 812.2px 654.45px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.identify_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 812.2px 654.45px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service #Testing_Icon {
  transform: scale(0);
  transform-origin: 663.35px 803.18px;

  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Testing_Icon {
  transform: scale(1);
  transform-origin: 663.35px 803.18px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 1300ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.testing_hover {
  transform: scale(1);
  transform-origin: 663.35px 803.18px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.testing_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 663.35px 803.18px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service #Packaging_Icon {
  transform: scale(0);
  transform-origin: 460px 855.73px;

  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Packaging_Icon {
  transform: scale(1);
  transform-origin: 460px 855.73px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 1420ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.packaging_hover {
  transform: scale(1);
  transform-origin: 460px 855.73px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.packaging_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 460px 855.73px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service #Joining_Icon {
  transform: scale(0);
  transform-origin: 257.15px 803.18px;

  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Joining_Icon {
  transform: scale(1);
  transform-origin: 257.15px 803.18px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 1540ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.joining_hover {
  transform: scale(1);
  transform-origin: 257.15px 803.18px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
a.joining_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 257.15px 803.18px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service #Bending_Icon {
  transform: scale(0);
  transform-origin: 107.78px 654.45px;

  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Bending_Icon {
  transform: scale(1);
  transform-origin: 107.78px 654.45px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 1660ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.bending_hover {
  transform: scale(1);
  transform-origin: 107.78px 654.45px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
a.bending_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 107.78px 654.45px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service #Seperating_Icon {
  transform: scale(0);
  transform-origin: 53.7px 450.19px;

  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Seperating_Icon {
  transform: scale(1);
  transform-origin: 53.7px 450.19px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 1780ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded a.seperating_hover {
  transform: scale(1);
  transform-origin: 53.7px 450.19px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded a.seperating_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 53.7px 450.19px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service #Marking_Icon {
  transform: scale(0);
  transform-origin: 107.78px 247.98px;

  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Marking_Icon {
  transform: scale(1);
  transform-origin: 107.78px 247.98px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 1900ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.marking_hover {
  transform: scale(1);
  transform-origin: 107.78px 247.98px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
a.marking_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 107.78px 247.98px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service #Feeding_Icon {
  transform: scale(0);
  transform-origin: 257.15px 97.42px;

  transition: transform 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#X-Service.loaded #Feeding_Icon {
  transform: scale(1);
  transform-origin: 257.15px 97.42px;

  transition: transform 0.3s ease-in-out;
  transition-delay: 2020ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

a.feeding_hover {
  transform: scale(1);
  transform-origin: 257.15px 97.42px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
a.feeding_hover:hover {
  cursor: pointer;
  transform: scale(1.07);
  transform-origin: 257.15px 97.42px;

  /*transition: transform 0.3s ease-in-out; */
  transition-delay: 0ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}