.CardGeneral {
  position: relative;
  width: 256px;
  height: 256px;
  border-radius: 24px;
  transition: all 0.5s ease;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3) inset,
    -2px -2px 15px rgba(0, 0, 0, 0.3) inset;
}

#ContenedorEstudio {
  position: relative;
  height: 500px;
  overflow: hidden;
}

#parallax{
  width: 100%;
  background: url("../img/IMG_2457.JPG");
  background-size: cover;
  position: absolute;
  height: 100vh;
  z-index: -100;
}

.tituloProt{
  font-family:"Bebas";
  color: #fff;
  text-align: center;

}
.botonHola{
text-decoration: none;
font-family:"montserrat Regular";
font-size: 15px;
color: #fff;
}

.botonHola:hover{
  text-decoration: none;
  color: #fff;
}

.bajar{
  width: 7%;
}

#rectanguloPro{
 color:#e61e45;
 font-family:"Bebas";
}

#ContenedorEstudio a{
  text-align: center;
}

/*-----Img Card---- */

.CardGeneral #imagenCard1 {
  background-image: url("../img/RedSoulUno.png");
  background-size: cover;
  opacity: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  border-radius: 24px;
  z-index: 10;
}

.CardGeneral:hover #imagenCard1 {
  background-image: url("../img/RedSoulDos.png");
  opacity: 100%;
  margin-bottom: 16px;
  position: initial;
  background-size: cover;
  width: 100px;
  height: 100px;
  border: solid 1px white;
  border-radius: 50%;
}

.card1{
  background: none;
  transition: all .5s ease;
}

.card1:hover{
    background:url("../img/Card1.png");
    background-position: center;
    background-repeat: no-repeat;
    border: solid 5px #e61e45;
}

.CardGeneral #imagenCard2 {
  background-image: url("../img/UnaSolaDos.png");
  background-size: cover;
  opacity: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  border-radius: 24px;
  z-index: 10;
}

.CardGeneral:hover #imagenCard2 {
  background-image: url("../img/UnaSolaUno.png");
  opacity: 100%;
  margin-bottom: 16px;
  position: initial;
  background-size: cover;
  width: 100px;
  height: 100px;
  border: solid 1px white;
  border-radius: 50%;
}

.card2{
  background: none;
  transition: all .5s ease;
}

.card2:hover{
    background:url("../img/Card2.png");
    background-position: center;
    background-repeat: no-repeat;
    border: solid 5px #e61e45;
}

.CardGeneral #imagenCard3 {
  background-image: url("../img/EntusManosUno.png");
  background-size: cover;
  opacity: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  border-radius: 24px;
  z-index: 10;
}

.CardGeneral:hover #imagenCard3 {
  background-image: url("../img/EntusManosDos.png");
  opacity: 100%;
  margin-bottom: 16px;
  position: initial;
  background-size: cover;
  width: 100px;
  height: 100px;
  border: solid 1px white;
  border-radius: 50%;
}

.card3{
  background: none;
  transition: all .5s ease;
}

.card3:hover{
    background:url("../img/Card3.png");
    background-position: center;
    background-repeat: no-repeat;
    border: solid 5px #e61e45;
}

.CardGeneral #imagenCard4 {
  background-image: url("../img/SyncWUno.png");
  background-size: cover;
  opacity: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  border-radius: 24px;
  z-index: 10;
}

.CardGeneral:hover #imagenCard4 {
  background-image: url("../img/SyncWDos.png");
  opacity: 100%;
  margin-bottom: 16px;
  position: initial;
  background-size: cover;
  width: 100px;
  height: 100px;
  border: solid 1px white;
  border-radius: 50%;
}

.card4{
  background: none;
  transition: all .5s ease;
}

.card4:hover{
    background:url("../img/Card4.png");
    background-position: center;
    background-repeat: no-repeat;
    border: solid 5px #e61e45;
}

.CardGeneral #imagenCard5 {
  background-image: url("../img/D&CUno.png");
  background-size: cover;
  opacity: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  border-radius: 24px;
  z-index: 10;
}

.CardGeneral:hover #imagenCard5 {
  background-image: url("../img/D&CDos.png");
  opacity: 100%;
  margin-bottom: 16px;
  position: initial;
  background-size: cover;
  width: 100px;
  height: 100px;
  border: solid 1px white;
  border-radius: 50%;
}

.card5{
  background: none;
  transition: all .5s ease;
}

.card5:hover{
    background:url("../img/Card5.png");
    background-position: center;
    background-repeat: no-repeat;
    border: solid 5px #e61e45;
}

.CardGeneral #imagenCard6 {
  background-image: url("../img/GranTierraUno.png");
  background-size: cover;
  opacity: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  border-radius: 24px;
  z-index: 10;
}

.CardGeneral:hover #imagenCard6 {
  background-image: url("../img/GranTierraDos.png");
  opacity: 100%;
  margin-bottom: 16px;
  position: initial;
  background-size: cover;
  width: 100px;
  height: 100px;
  border: solid 1px white;
  border-radius: 50%;
}

.card6{
  background: none;
  transition: all .5s ease;
}

.card6:hover{
    background:url("../img/Card6.png");
    background-position: center;
    background-repeat: no-repeat;
    border: solid 5px #e61e45;
}

.CardGeneral #imagenCard7 {
  background-image: url("../img/ProjectUno.png");
  background-size: cover;
  opacity: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  border-radius: 24px;
  z-index: 10;
}

.CardGeneral:hover #imagenCard7 {
  background-image: url("../img/ProjectDos.png");
  opacity: 100%;
  margin-bottom: 16px;
  position: initial;
  background-size: cover;
  width: 100px;
  height: 100px;
  border: solid 1px white;
  border-radius: 50%;
}

.card7{
  background: none;
  transition: all .5s ease;
}

.card7:hover{
    background:url("../img/Card7.png");
    background-position: center;
    background-repeat: no-repeat;
    border: solid 5px #e61e45;
}

.CardGeneral #imagenCard8 {
  background-image: url("../img/WeaTherUno.png");
  background-size: cover;
  opacity: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  border-radius: 24px;
  z-index: 10;
}

.CardGeneral:hover #imagenCard8 {
  background-image: url("../img/WeaTherDos.png");
  opacity: 100%;
  margin-bottom: 16px;
  position: initial;
  background-size: cover;
  width: 100px;
  height: 100px;
  border: solid 1px white;
  border-radius: 50%;
}

.card8{
  background: none;
  transition: all .5s ease;
}

.card8:hover{
    background:url("../img/Card8.png");
    background-position: center;
    background-repeat: no-repeat;
    border: solid 5px #e61e45;
}

/*-----Img Card final---- */

.CardGeneral:hover {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), -2px -2px 10px rgba(0, 0, 0, 0.2);
}

.infoCard p {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  transform: translateY(-45px);
}

.infoCard p.Titulo {
  text-align: center;
  font-family: "Bebas";
  font-size: 25px;
  color: white;
  margin: 0;
  padding: 0;
}

.infoCard p.EmFe {
  text-align: center;
  font-family: "montserrat Light";
  font-size: 14px;
  color: white;
  margin: 0;
  padding: 0;
}

.btnCard a {
  padding: 5px 30px;
  border-radius: 16px;
  background-color: #e61e45;
  text-decoration: none;
  color: white;
  font-family: "Bebas";
  font-size: 20px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  transform: translateY(-45px);
}

.CardGeneral:hover .infoCard p {
  visibility: initial;
  opacity: 1;
  transform: translateY(0px);
}

.CardGeneral:hover .btnCard a {
  visibility: initial;
  opacity: 1;
  transform: translateY(0px);
}

/*---scroll modal---*/

.modal::-webkit-scrollbar {
  -webkit-appearance: none;
}

.modal::-webkit-scrollbar:vertical {
  width: 5px;
}

.modal::-webkit-scrollbar-button:increment,
.modal::-webkit-scrollbar-button {
  display: none;
}

.modal::-webkit-scrollbar-thumb {
  background-color: #e61e45;
  border-radius: 20px;
  border: 2px solid #e61e45;
}

.modal::-webkit-scrollbar-track {
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar {
  -webkit-appearance: none;
}

.modal-body::-webkit-scrollbar:vertical {
  width: 5px;
}

.modal-body::-webkit-scrollbar-button:increment,
.modal-body::-webkit-scrollbar-button {
  display: none;
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: #e61e45;
  border-radius: 20px;
  border: 2px solid #e61e45;
}

.modal-body::-webkit-scrollbar-track {
  border-radius: 10px;
}

/*----Final Scroll Modal----*/

/* modal general*/


.botones{
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: all .5s ease;
  z-index: 200;
}

.Siguiente p{
 position: fixed;
 margin: auto;
}

.Siguiente img{
  width: 15px;
  margin: auto;
}

.Siguiente a{
  width: 100%;
  text-align: center;
}

.Siguiente{
  width: 40px;
  height: 40px;
  background-color: #ad002d;
  border: none;
  border-radius: 100%;
  display: block;
  margin-top: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.603);
  transition: all .5s ease;
}

.Siguiente:hover{
  width: 43px;
  height: 43px;
  border: #fff 0.5px solid;
  background-color: #e61e45;
}

.Siguiente:hover img{
  width: 17px;
  margin: auto;
  transform: rotate(15deg);
}

.modal-header{
  background-color: #e61e45;
}

.modal-body div > video{
display:flex;
}

.btn-close{
  opacity: 100%;
  border-radius: none;
  border: none;
}

.modal-backdrop {
  --bs-backdrop-bg:#000;
  --bs-backdrop-opacity: 95%;
}

.modal-content{
  border-radius: 0;
}

.modal-body img , video{
  width: 100%;
  padding: 0;
  margin: 0;
  }

.modal {
    --bs-modal-bg:none;
    --bs-modal-border-color:none;
    --bs-modal-border-width: 0px;
    --bs-modal-border-radius:10px;
    --bs-modal-inner-border-radius: 10px;
    --bs-modal-header-padding-x: 0rem;
    --bs-modal-header-padding-y: 0rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: none;
    --bs-modal-header-border-width: 0px;
  }

.modal-body{
  padding: 0;
}

.informacion{
    padding: 20px 15px;
    background-image: url("../img/BgBlanco.jpg");
    background-size: cover;
  }

.modal-body p{
font-family: "montserrat Regular";
font-size: 13px;
  }

span.TitulosTab{
  font-family:"Bebas";
  font-size: 25px;
  color: #e61e45;
}

.bordere{
  height: 100%;
  border-right: rgb(194, 194, 194) 1px solid;
}

.PiePagina{
  background: url("../img/BgNegro.jpg");
  background-position: center;
  background-size: 150%;
  border-top: #e61e45 4px solid;
}

.PiePagina img{
  width: 60px;
}

.PiePagina a{
  text-align: center;
  display: inline;
}

p.nombreProyect{
  font-family:"montserrat Black";
  color: white;
  padding-top: 10px;
  padding-bottom:0;
}

p.marcaregisDos{
  font-family:"montserrat Light";
  font-size: 10px;
  color: white;
}



/*----------------*/