* {
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: #818181;
  border-radius: 3px;
}

.all_content {
  overflow: hidden;
}

.tdm-logo-desk {
  position: absolute;
  height: 5rem;
  top: 1.25rem;
  left: 2.5rem;
  z-index: 25;
}

.actual_video {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.filler_video {
  width: 100%;
  height: calc(55.75vw - 27px);
}

.video_svg {
  position: absolute;
  top: 0;
  fill: url(#header-shape-gradient-video) #fff;
}

.animation_collection {
  position: absolute;
  top: calc(50% + 18px);
  left: 53vw;
  height: 35rem;
  width: 35rem;
  transform: translate(0, -50%);
  z-index: 200;
  border-radius: 18px;
  overflow: hidden;
}

.animation_a1 {
  z-index: 103;
}
.animation_a2 {
  z-index: 102;
}
.animation_a3 {
  z-index: 101;
}

.dot_0_w {
  background: #ffffff;
  cursor: unset;
}

.dot_1_w {
  background: #b1070737;
}

.dot_2_w {
  background: #b1070737;
}

.dot_3_w {
  background: #b1070737;
}

.dot_4_w {
  background: #ffffff;
  filter: drop-shadow(1px 3px 1px #dadada);
  cursor: unset;
}

#header-shape-gradient-extra-mobile {
  --color-stop: #f4f4f4;
  --color-bot: #e1e0e0;
}
#header-shape-gradient-hyper-mobile {
  --color-stop: #f4f4f4;
  --color-bot: #e1e0e0;
}

.bottom_title {
  position: relative;
  padding-top: 5vw;
  padding-bottom: 2vw;
  left: 50%;
  transform: translate(-50%, 0);
}

.main_bottom_title {
  text-align: center;
  color: #303030;
  font-size: 2.5rem;
  padding-bottom: 0.5rem;
}
.main_bottom_title_hyper_mobile {
  text-align: center;
  color: #303030;
  font-size: 1.6rem;
  padding-bottom: 0.2rem;
  padding-top: 2rem;
  display: none;
}
.sub_bottom_title {
  text-align: center;
  color: #ffffffd5;
  font-size: 1.2rem;
}
.sub_bottom_title_extra_mobile {
  text-align: center;
  color: #ffffffd5;
  font-size: 1.1rem;
  display: none;
  padding-left: 6.5vw;
  padding-right: 6.5vw;
}
.img_container {
  position: absolute;
  left: 6%;
  right: calc(6% - 9px);
  height: 100%;
  border-radius: 9px;
  overflow: hidden;
  background: #ffffff37;
}

.img_revisioni {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  opacity: 0;
}

.background_picture {
  position: relative;
  right: 0;
  height: 25vw;
  width: 100%;
  overflow: hidden;
}

.tooling_img {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
.just_for_slide {
  height: calc(33vw - 227px);
}
.next_revisioni {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10;
}
.tooling_img_mobile {
  display: none;
}

.tooling_img_extra_mobile {
  display: none;
}

.bottom_svg_mobile {
  height: 77vw;
}
.bottom_svg_extra_mobile {
  position: relative;
  fill: url(#header-shape-gradient-extra-mobile) #fff;
  margin: 0;
  width: 100%;
  height: 107vw;
  display: none;
}
.bottom_svg_hyper_mobile {
  position: relative;
  fill: url(#header-shape-gradient-hyper-mobile) #fff;
  margin: 0;
  width: 100%;
  height: 127vw;
  display: none;
}
.txt_inside_bottom {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  right: 0;
  text-align: right;
  display: none;
  padding-left: calc(3vw - 9px + 3rem);
  padding-bottom: 1rem;
  padding-top: 1rem;
  line-height: 125%;
  max-width: 32rem;
}
.txt_inside_bot {
  margin-left: auto;
  margin-right: 0;
  min-width: 32rem;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  color: #cccccc;
}
.last_text {
  max-height: calc(33vw - 227px - 18px);
}
.last_text_slide {
  height: calc(33vw - 227px - 18px);
}
.text_next {
  color: #ffffff;
  position: absolute;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  letter-spacing: 1px;
  line-height: 125%;
  font-family: "Karla", sans-serif;
}
.title {
  white-space: normal;
}
.dot_1_h, .dot_2_h, .dot_3_h {
margin-top: 36px;
margin-bottom: 36px;
}
.to_click_title_1, .to_click_title_2, .to_click_title_3{
  padding-left: 2rem;
}
@media screen and (max-width: 929px) {
  .to_click_title_1, .to_click_title_2, .to_click_title_3{
    padding-left: 0;
  }
}

.img_big_container {
  max-width: 2600px;
  width: 68%;  
  left: 16%; 
position: relative;
}

.img_big {
  width: 100%;
}

.img_big_txt_container {
  max-width: 2600px;
  width: 68%;  
  left: 16%; 
position: relative;
color: #303030;
margin-top: 4rem;
margin-bottom: 1rem;
}
@media screen and (max-width: 1360px) {
  .img_big_txt_container {
  margin-top: 2rem;
  }
}
@media screen and (max-width: 1160px) {
.bottom_title{
padding-top:4vw;
padding-bottom: 1vw;
}
.main_bottom_title{
  font-size: 2rem;
}
.img_big_txt_container {
  margin-top: 1rem;
  }
}


.img_big_txt {
  width: 100%;
}

@media screen and (max-width: 1160px) {
    .text_next {
      font-size: 1.75rem;
    }
  }



@media screen and (max-width: 929px) {
  .background_picture {
    height: 50vw;
  }
  .tooling_img_desktop {
    display: none;
  }
  .tooling_img_mobile {
    display: block;
  }
  .text_next {
    left: 33%;
    width: 48%;
    font-size: 1.75rem;
  }
}



.animation_container_opening {
  animation-name: animation-container-opening;
  animation-iteration-count: 1;
  animation-duration: 2s;
}
.animation_container_closing {
  animation-name: animation-container-closing;
  animation-iteration-count: 1;
  animation-duration: 2s;
}
@keyframes animation-container-opening {
  0% {
    height: 0;
  }
  100% {
    height: 69vw;
  }
}
@keyframes animation-container-closing {
  0% {
    height: 69vw;
  }
  100% {
    height: 0;
  }
}
.animation_video_opening {
  animation-name: opacity_in;
  animation-iteration-count: 1;
  animation-duration: 2s;
}
.animation_video_closing {
  animation-name: opacity_out;
  animation-iteration-count: 1;
  animation-duration: 2s;
}

@media screen and (min-width: 930px) and (max-width: 1250px) {
  .animation_collection {
    height: calc(44vw);
    width: calc(44vw);
  }
}

@media screen and (min-width: 930px) and (max-width: 1100px) {
  @keyframes title_in_bot {
    0% {
      color: #b7b7b7;
      height: 1rem;
      font-size: 1rem;
    }
    100% {
      color: #ffffff;
      height: 1.1rem;
      font-size: 1.1rem;
    }
  }

  @keyframes title_out_bot {
    0% {
      color: #ffffff;
      height: 1.1rem;
      font-size: 1.1rem;
    }
    100% {
      color: #b7b7b7;
      height: 1rem;
      font-size: 1rem;
    }
  }
}

@keyframes title_in_bot {
  0% {
    color: #b7b7b7;
  }
  100% {
    color: #ffffff;
  }
}
@keyframes title_out_bot {
  0% {
    color: #ffffff;
  }
  100% {
    color: #b7b7b7;
  }
}

@media screen and (max-width: 666px) {
  .main_bottom_title {
    font-size: 1.8rem;
    padding-bottom: 0.6rem;
  }
  .sub_bottom_title {
    display: none;
  }
  .sub_bottom_title_extra_mobile {
    display: block;
  }
}
@media screen and (max-width: 550px) {
  .main_bottom_title {
    padding-left: 6.5vw;
    padding-right: 6.5vw;
  }
  .bottom_svg_mobile {
    display: none;
  }
  .bottom_svg_extra_mobile {
    display: block;
  }

  .just_for_slide {
    height: calc(73.5vw - 227px);
  }
  .last_text {
    max-height: calc(73.5vw - 227px - 18px);
  }
  .last_text_slide {
    height: calc(73.5vw - 227px - 18px);
  }
}
@media screen and (max-width: 480px) {
  .main_bottom_title {
    display: none;
  }
  .main_bottom_title_hyper_mobile {
    display: block;
  }

  .bottom_svg_extra_mobile {
    display: none;
  }
  .bottom_svg_hyper_mobile {
    display: block;
  }

  .just_for_slide {
    height: calc(95vw - 227px);
  }
  .last_text {
    max-height: calc(95vw - 227px - 18px);
  }
  .last_text_slide {
    height: calc(95vw - 227px - 18px);
  }
}
@media screen and (max-width: 350px) {
  .title_bot {
    font-size: 0.75rem;
  }
  .sub_bottom_title_extra_mobile,
  .txt_inside {
    font-size: 0.95rem;
  }
}

@media screen and (max-width: 404px) {
  .dot_1_h,
  .dot_2_h,
  .dot_3_h {
    font-size: 0.8rem;
    margin-top: 36px;
    margin-bottom: 36px;
  }
}

@media screen and (max-width: 1160px) {
  .text_next {
    font-size: 1.75rem;
  }
}
@media screen and (max-width: 740px) {
    .text_next {
      font-size: 1.5rem;
    }
  }

@media screen and (max-width: 580px) {
  .text_next {
    left: 9%;
    top: 9vw;
    width: 82%;
    transform: unset;
    font-size: 2rem;
    text-align: left;
    text-shadow: 1px 1px 2px #20202080;
    line-height: 115%;
  }
  .background_picture {
    height: 100vw;
  }
  .tooling_img_mobile {
    display: none;
  }
  .tooling_img_extra_mobile {
    display: block;
  }
}
@media screen and (max-width: 422px) {
  .text_next {
    font-size: 1.75rem;
  }
}
@media screen and (max-width: 370px) {
  .text_next {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 340px) {
  .text_next {
    width: 76%;
  }
}

.bottom_content {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

@media screen and (max-width: 929px) {
  .filler_video {
    height: calc(53vw - 27px);
  }
  .title_bot {
    font-size: 0.8rem;
  }
  .animation_a1,
  .animation_a2,
  .animation_a3 {
    position: relative;
    height: unset;
    width: 69vw;
  }
  .animation_mobile {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    height: unset;
    width: 69vw;
    opacity: 0;
    height: 69vw;
  }
  .animation_the_container {
    width: 69vw;
    height: 0;
    left: 3.5vw;
    overflow: hidden;
    border-radius: 18px;
  }
  .dot_0_w,
  .dot_4_w {
    box-shadow: 1px 2px 2px #7c7c7c30;
  }
  .bottom_content {
    height: 77vw;
  }
  .svg_container_bottom {
    height: 77vw;
  }

  .just_for_slide {
    height: calc(61.5vw - 234px + 13px);
  }
  .img_container {
    position: relative;
    left: unset;
    right: unset;
    height: calc(61.5vw + 13px);
    border-radius: 9px;
    overflow: hidden;
    background: #ffffff37;
    width: 100%;
  }
  .last_text {
    max-height: calc(61.5vw - 234px - 18px + 13px);
  }
  .last_text_slide {
    height: calc(61.5vw - 234px - 18px + 13px);
  }
  .the_text {
    position: absolute;
    left: 0;
    right: 6vw;
    top: 0;
    padding-left: 3.5vw;
    padding-right: 0;
    overflow-y: auto;
  }
  .txt_inside_bot {
    padding-left: 3.5vw;
    padding-right: 6vw;
    margin-left: 0;
    margin-right: 0;
    min-width: unset;
    box-sizing: border-box;
    color: #cccccc;
  }
  .txt_inside_bottom {
    text-align: left;
    max-width: unset;
  }
  .container_to_center {
    position: relative;
    display: grid;
    width: 100%;
    height: 120vw;
    top: 3rem;
    bottom: 0;
    transform: unset;
    grid-template-columns: 6% 6% 88%;
    grid-template-rows: 50% 50%;
  }
  .w_100_2_top,
  .w_100_2_mid,
  .w_100_2_bot {
    width: 100%;
    display: grid;
    grid-template-columns: 6% 6% 88%;
  }
  .to_set_3rd {
    order: 3;
  }
  .to_set_2nd {
    order: 2;
  }
  .to_set_1st {
    order: 1;
  }
  .bottom_content {
    display: flex;
    flex-direction: column;
  }
  .main_bottom_title{
    padding-top: 1rem;
  }
}
@media screen and (max-width: 550px) {
  .bottom_content {
    height: 107vw;
  }
  .svg_container_bottom {
    height: 107vw;
  }
}
@media screen and (max-width: 480px) {
  .bottom_content {
    height: 127vw;
  }
  .svg_container_bottom {
    height: 127vw;
  }
}