.sixth {
  position: relative;
}
.containerHow > div {
  width: 100%;
  height: 100vh;
}
.mySlides {
  flex-direction: column;
  align-items: center;
  /* width: 60vw; */
  padding-bottom: 20px;
  z-index: 5;
}
.mySlides1 {
  display: flex;
/*   flex-direction: column; */
  align-items: center;
  justify-content: center;
  z-index: 5;
}
/* The Modal (background) */
.modal {
  position: absolute;
  z-index: 5;
/*   display: flex;
  justify-content: center; */
  background-color: rgba(0, 0, 0, 0.85);
  padding-bottom: 50px;
  
}

/* Modal Content */
.modal-content {
  position: relative;
  /* margin: auto;
  padding: 0;
  width: 0%; */
}

/* The Close Button */
.close {
  color: black;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  z-index: 6;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Next & previous buttons */
.prev {
  transform: rotate(-90deg) scale(0.45);
}
.next {
  transform: rotate(90deg) scale(0.45);
}

.lineDot1 {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5%;
  bottom: 35px;
  z-index: 6;
}

.dot1 {
  cursor: pointer;
  height: 5px;
  width: 30px;
  margin: 2px 2px;
  background-color: #c5c5c5;
  border-radius: 2px;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.activeDot1, .dot1:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4; transform: translateX(-50px);} 
  to {opacity: 1; transform: translateX(0px);}
}

.fadeOut {
  animation-name: fadeout;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeout {
  from {opacity: 1; transform: translateX(0px);} 
  to {opacity: 0; transform: translateX(-50px);}
}

.slopeBegin1 {
  background: linear-gradient(to right, #1a2966 0%, #0e3eff 100%);
  clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
}

.slopeEnd1 {
  clip-path: polygon(70% 0, 100% 0, 80% 100%, 50% 100%);
}

.slopeBegin1,
.slopeEnd1 {
/*   cursor: pointer; */
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.pink {
  background: linear-gradient(to right, grey 0%, lightgrey 100%);
}

.teal {
  background: linear-gradient(to right, SlateBlue 0%, DeepSkyBlue 100%);
}

.tomato {
  background: linear-gradient(to right, green 0%, lightgreen 100%);
}

.svgfrecciaL {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 3%;
  z-index: 3;
  transform: rotate(180deg);
}
.svgfrecciaR1 {
  cursor: pointer;
  position: absolute;
  top: 85%;
  right: 7%;
  z-index: 3;
  transform: scale(3);
}
.svgText1 {
  cursor: pointer;
  position: absolute;
  color:#ffffff; 
  font-size:10vmin; 
  font-weight:700;
  text-align: center; 
  z-index: 2;
  transition: 2s;
}
.svgText1:hover {
  opacity: 0.6;
  transform: scale(0.9);
}
#titleBim{
  position: relative;
  left: 10%;
  width: 90%;
}
.firstBlock1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 18%;
  margin: 0 10%;
  z-index: 2;
}

#subTitle {
  position: absolute;
  width: 10vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  z-index: 9;
  top: 18%;
  left: 0;
}
.subtitleLine {
  width: 10vw;
  height: 2px;
  background: white;
  animation: lineEnter 1s forwards;
}
@keyframes lineEnter {
  from {opacity: 0; transform: translateX(-50px);} 
  to {opacity: 1; transform: translateX(0px);}
  }
  
.subtitleText {
  color: white;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: 6vmin;
  font-weight: 700;
  line-height: 100%;
  text-align: right;
  animation: textEnter 2s forwards;
  }
@keyframes textEnter {
  0% {opacity: 0; transform: translateY(-30px) rotate(180deg);} 
  50% {opacity: 0; transform: translateY(-30px) rotate(180deg);} 
  100% {opacity: 1; transform: translateY(10px) rotate(180deg);}
  }

.newSlide {
  border-radius: 50%;
}

.imageBIM {
  position: relative;
  padding: 0 5% 0 0;
  margin-top: 5%;
  animation-name: fadeImg;
  animation-duration: 1.5s;
}

@keyframes fadeImg {
from {opacity: 0; transform: translateX(-50px);} 
to {opacity: 1; transform: translateX(0px);}
}

.imageBIM img {
  width: 100%;
  height: auto;
}
/* .firstBlock1 {
  width: 100%;
  margin-left: 5%;
} */
.lineBIM {
  transform: scaleX(0.5) translateX(-50%);
}
.textBIM{
  color: white;
  font-size: 1vmax;
  text-align: left;
  font-weight: 500;
}
.textMachine {
  color: white;
  font-size: 1vmax;
  font-weight: 600;
  position: absolute;
  bottom: 20%;
  left: 16%;
}
.numbertext {
  color: white;
  font-size: 1.6vmax;
  font-weight: 600;
  margin: 0 20px;
  /* position: absolute;
  left: 2%; */
}

.rettBIM {
  max-width: 70%;
  margin-top: 5px;
  padding: 20px;
  border-radius: 10px;
  animation: rettangolo 1s;
}
.rettGallery {
  max-width: 100%;
  margin-top: 5px;
  padding: 20px;
  border-radius: 10px;
  animation: rettangolo 1s;
}
@keyframes rettangolo {
  0% { transform: translateX(-500px);
        opacity: 0;
      }
  100% { transform: translateX(0px);
        opacity: 1;
        }
}

/* .image {
  position: absolute;
  background-color: aqua;
  width: 1000px;
  height: 800px;
  display: none;
} */
.steelDraw{
  position: absolute;
  top: 13%;
  left: 0%;
}
.imgSteel {
  width: 40px;
  animation: imgDG 13s;
  z-index: 2;
}
@keyframes imgDG {
  0% {opacity: 0;} 
  92.3% {opacity: 0;} 
  100% {opacity: 1;} 
  }
.lineDGreen {
  width: 2px;
  height: 280px;
  margin-left: 10px;
  background-color: rgb(24, 114, 39);
  animation: lineDG 13s;
}
@keyframes lineDG {
  0% {transform: scaleY(0) translateY(150px);} 
  92.3% {transform: scaleY(0) translateY(150px);} 
  100% {transform: scaleY(1) translateY(0px);}
  }
.btn1{
  position: absolute;
  background-color: rgb(24, 114, 39);
  color: white;
  font-size: clamp(1vmin, 14px, 2vmax);
  text-align: left;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease-in-out;
  animation: btnDG 5s;
}
@keyframes btnDG {
  0% {transform: scale(0);} 
  80% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn1:hover {
  transform: scale(1.2);
}

.thermalDraw{
  position: absolute;
  top: 26%;
  left: 6%;
}
.imgTherm {
  width: 30px;
  margin-left: -2px;
  animation: imgDG 13s;
}
.lineLY {
  width: 2px;
  height: 220px;
  margin-left: 10px;
  background-color: rgb(201, 171, 0);
  animation: lineDG 13s;
}
.btn2{
  position: absolute;
  z-index: 1;
  background-color: rgb(201, 171, 0);
  color: white;
  font-size: clamp(1vmin, 14px, 2vmax);
  text-align: left;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease-in-out;
  animation: btnDY 9s;
}
@keyframes btnDY {
  0% {transform: scale(0);} 
  89% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn2:hover {
  transform: scale(1.3);
}

.plantDraw{
  position: absolute;
  top: 26%;
  left: 18%;
}
.imgPlant {
  width: 30px;
  margin-left: -5px;
  z-index: 1;
  animation: imgDG 13s;
}
.lineR {
  width: 2px;
  height: 270px;
  margin-left: 10px;
  background-color: rgb(228, 34, 34);
  animation: lineDG 13s;
}
.btn3{
  position: absolute;
  z-index: 1;
  background-color: rgb(228, 34, 34);
  color: white;
  font-size: clamp(1vmin, 14px, 2vmax);
  text-align: left;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease-in-out;
  animation: btnLVB 7s;
}
@keyframes btnLVB {
  0% {transform: scale(0);} 
  85% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn3:hover {
  transform: scale(1.3);
}

.scadaDraw{
  position: absolute;
  top: 8%;
  left: 13%;
}
.imgScada {
  width: 40px;
  animation: imgDG 13s;
}
.lineV {
  width: 2px;
  height: 280px;
  margin-left: 10px;
  background-color: rgb(161, 58, 165);
  animation: lineDG 13s;
}
.btn4{
  position: absolute;
  background-color: rgb(161, 58, 165);
  color: white;
  font-size: clamp(1vmin, 14px, 2vmax);
  text-align: left;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease-in-out;
  animation: btnRB 11s;
}
@keyframes btnRB {
  0% {transform: scale(0);} 
  91% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn4:hover {
  transform: scale(1.3);
}

.archDraw{
  position: absolute;
  top: 7%;
  left: 24%;
}
.imgArch {
  width: 40px;
  animation: imgDG 13s;
}
.lineC {
  width: 2px;
  height: 250px;
  margin-left: 10px;
  background-color: rgb(0, 174, 255);
  animation: lineDG 13s;
}
.btn5{
  position: absolute;
  background-color: rgb(0, 174, 255);
  color: white;
  font-size: clamp(1vmin, 14px, 2vmax);
  text-align: left;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease-in-out;
  animation: btnLB 3s;
}
@keyframes btnLB {
  0% {transform: scale(0);} 
  66% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn5:hover {
  transform: scale(1.3);
}

.btn15{
  position: absolute;
  top: -8%;
  left: 45%;
  background-color: rgb(255, 0, 234);
  color: white;
  font-size: clamp(1vmin, 14px, 2vmax);
  text-align: left;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease-in-out;
  animation: btnLM 1s;
}
@keyframes btnLM {
  0% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn15:hover {
  transform: scale(1.3);
}

.processDraw{
  position: absolute;
  top: 0%;
  left: 66%;
}
.imgProcess {
  width: 40px;
  animation: imgDG 13s;
}
.lineY {
  width: 2px;
  height: 300px;
  margin-left: 10px;
  background-color: rgb(253, 186, 0);
  animation: lineDG 13s;
}
.btn6{
  position: absolute;
  background-color: rgb(253, 186, 0);
  color: white;
  font-size: clamp(1vmin, 14px, 2vmax);
    text-align: left;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease-in-out;
  animation: btnY 2s;
}
@keyframes btnY {
  0% {transform: scale(0);} 
  50% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn6:hover {
  transform: scale(1.3);
}

.machinesDraw{
  position: absolute;
  top: 28%;
  left: 69%;
}
.imgMachines {
  width: 30px;
  animation: imgDG 13s;
}
.lineO {
  width: 2px;
  height: 250px;
  margin-left: 10px;
  background-color: rgb(255, 145, 0);
  animation: lineDG 13s;
}
.btn7{
  position: absolute;
  z-index: 1;
  background-color: rgb(255, 145, 0);
  color: white;
  font-size: clamp(1vmin, 14px, 2vmax);
    text-align: left;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease-in-out;
  animation: btnAB 8s;
}
@keyframes btnAB {
  0% {transform: scale(0);} 
  87.5% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn7:hover {
  transform: scale(1.3);
}

.concreteDraw{
  position: absolute;
  top: 5%;
  left: 76%;
}
.imgConcrete {
  width: 40px;
  animation: imgDG 13s;
}
.lineLR {
  width: 2px;
  height: 300px;
  margin-left: 10px;
  background-color: rgb(255, 115, 150);
  animation: lineDG 13s;
}
.btn8{
  position: absolute;
  background-color: rgb(255, 115, 150);
  color: white;
  font-size: clamp(1vmin, 14px, 2vmax);
    text-align: left;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease-in-out;
  animation: btnLRB 6s;
}
@keyframes btnLRB {
  0% {transform: scale(0);} 
  83% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn8:hover {
  transform: scale(1.3);
}

.electricDraw{
  position: absolute;
  top: 28%;
  left: 84%;
}
.imgElectric {
  width: 40px;
  animation: imgDG 13s;
}
.lineB {
  width: 2px;
  height: 220px;
  margin-left: 10px;
  background-color: rgb(0, 111, 202);
  animation: lineDG 13s;
}
.btn9{
  position: absolute;
  z-index: 1;
  background-color: rgb(0, 111, 202);
  color: white;
  font-size: clamp(1vmin, 14px, 2vmax);
    text-align: left;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease-in-out;
  animation: btnVB 10s;
}
@keyframes btnVB {
  0% {transform: scale(0);} 
  90% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn9:hover {
  transform: scale(1.3);
}

.structDraw{
  position: absolute;
  top: 10%;
  left: 88%;
}
.imgStruct {
  width: 40px;
  animation: imgDG 13s;
}
.lineLG {
  width: 2px;
  height: 300px;
  margin-left: 10px;
  background-color: rgb(98, 165, 72);
  animation: lineDG 13s;
}
.btn10{
  position: absolute;
  background-color: rgb(98, 165, 72);
  color: white;
  font-size: clamp(1vmin, 14px, 2vmax);
    text-align: left;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .5s ease-in-out;
  animation: btnLGB 4s;
}
@keyframes btnLGB {
  0% {transform: scale(0);} 
  75% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn10:hover {
  transform: scale(1.3);
}

.btn11{
  position: absolute;
  top: 42%;
  left: 42%;
  background-color: white;
  color: black;
  font-size: clamp(1vmin, 14px, 2vmax);
    font-weight: 600;
  padding: 5px;
  border: solid 5px rgba(102, 102, 102, 0.3);
  cursor: pointer;
  border-radius: 10px;
  text-align: center;
  transition: all .5s ease-in-out;
  animation: btngrayB 12s;
}
@keyframes btngrayB {
  0% {transform: scale(0);} 
  91.7% {transform: scale(0);} 
  100% {transform: scale(1);}
  }
.btn11:hover {
  transform: scale(1.3);
}

.btn12{
  position: absolute;
  top: 50%;
  left: 40%;
  background-color: white;
  color: black;
  font-size: clamp(1vmin, 14px, 2vmax);
  font-weight: 600;
  padding: 5px;
  border: solid 5px rgba(102, 102, 102, 0.3);
  cursor: pointer;
  border-radius: 10px;
  text-align: center;
  transition: all .5s ease-in-out;
  animation: btngrayB 12s;
}
.btn12:hover {
  transform: scale(1.3);
}

.btn13{
  position: absolute;
  top: 58%;
  left: 42%;
  background-color: white;
  color: black;
  font-size: clamp(1vmin, 14px, 2vmax);
  font-weight: 600;
  padding: 5px;
  border: solid 5px rgba(102, 102, 102, 0.3);
  cursor: pointer;
  border-radius: 10px;
  text-align: center;
  transition: all .5s ease-in-out;
  animation: btngrayB 12s;
}
.btn13:hover {
  transform: scale(1.3);
}



@media only screen and (max-width: 374px) {

  .svgfrecciaR1 {
    transform: scale(1);
    top: 80%;
  }
  .textBIM {
    font-size: 2vmax;
  }
  .textMachine {
    font-size: 2vmax;
  }
  .numbertext {
    font-size: 1.6vmax;
  }
  .mySlides {
    width: 100vw;
  }
  .images {
    width: 100%;
  }
}
@media only screen and (min-width: 375px) {

  .svgfrecciaR1 {
    transform: scale(1);
    top: 80%;
  }
  .textBIM {
    font-size: 2vmax;
  }
  .textMachine {
    font-size: 2vmax;
  }
  .numbertext {
    font-size: 2vmax;
  }
  .mySlides {
    width: 100vw;
  }
  .images {
    width: 100%;
  }
} 
@media only screen and (min-width: 576px) {

  .svgfrecciaR1 {
    transform: scale(1);
    top: 80%;
  }
  .textBIM {
    font-size: 2vmax;
  }
  .textMachine {
    font-size: 2vmax;
  }
  .numbertext {
    font-size: 2vmax;
  }
  .mySlides {
    width: 75vw;
  }
  .modal {
    margin-top: -8%;
  }
  .images {
    width: 100%;
  }
} 
@media only screen and (min-width: 768px) {

  .svgfrecciaR1 {
    transform: scale(2);
  }
  .textBIM {
    font-size: 1.6vmax;
  }
  .textMachine {
    font-size: 1.6vmax;
  }
  .numbertext {
    font-size: 1.6vmax;
  }
  .mySlides {
    width: 60vw;
  }
  .modal {
    margin-top: -8%;
  }
  .images {
    width: 100%;
  }
  .imageBIM {
    width: 80%;
  }
} 
@media only screen and (min-width: 1281px) {

  .svgfrecciaR1 {
    transform: scale(3);
  }
  .textBIM {
    font-size: 1.1vmax;
  }
  .textMachine {
    font-size: 1.1vmax;
  }
  .numbertext {
    font-size: 1.1vmax;
  }
  .mySlides {
    width: 60vw;
  }
  .modal {
    margin-top: -3%;
  }
  .images {
    width: 100%;
  }
} 
@media only screen and (min-width: 1910px) {
  .imageBIM {
    width: 1336px;
  }
} 

@media only screen and (max-height: 430px) {
  
  .images {
    width: 68%;
  }
  .mySlides {
    width: 60vw; 
  }
  .modal {
    margin-top: -8%;
  }
  .close {
    color: white;
  }
  .imageBIM {
    width: 50%;
    margin-top: 2%;
  }
  /* .firstBlock1 {
    top: 15%;
  }
  #subTitle {
    top: 15%;
  } */
} 
/* @media only screen and (max-width: 1540px) and (min-width: 1200px) {
  .lineDGreen {
    height:180px;
  } 

} */