/* Media querie para dispositivos más grandes de 576*/
@media (min-width:576px) {
	.menor576{display:none;}
	.mayor576{display:block;}
	}
	
	/* Media querie para dispositivos menores de 576*/
	@media (max-width:576px){
	.menor576{display:block;}
	.mayor576{display:none;}
	}
/* 
.landing-image {
   position: relative;
   height: 50vh;
   background: url('../img/stmrender_portada.jpg') center/cover no-repeat;
} */

.bg-rojo {
  background-color: #da0b0b
}

.bg-gris {
  background-color: #f1f0f0
}

.text-gris {
  color: #808080
}

.bg-image {
  position: relative;
  width: 100%;
  height: 45vh; 
  background-image: url('../img/stmrender_portadaa-min.jpg');
  background-size: cover;
  background-position: center;
}

.bg-puntos {
  background-image: url('../img/stmrender_puntos.png');
  background-repeat: repeat;
}

.content {
  position: absolute;
  height: 45vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
}

.linea-superior {
  position: absolute;
  top: 5%;
  width: 80%;
  color: #fff; /* Cambia el color del icono si es necesario */
}

.linea-media {
  position: absolute;
  top: 35%;
  width: 80%;
  color: #fff; /* Cambia el color del icono si es necesario */
}

.linea-inferior {
  position: absolute;
  bottom: 0;
  width: 80%;
  color: #fff; /* Cambia el color del icono si es necesario */
}

.landing-container {
  position: absolute;
  transform: translate(-50%, -50%);
}

.landing-text {
   position: absolute;
   top: 50%;
   left: 40vw;
   transform: translate(-50%, -50%);
   /*text-align: center;*/
   color: #ffffff;
}

.landing-instagram {
  position: absolute;
  top: 90%;
  left: 80%;
  transform: translate(-50%, -50%);
  height: 3vh;
  width: 3vh;
}

.landing-correo {
  position: absolute;
  top: 90%;
  left: 90%;
  transform: translate(-50%, -50%);
  height: 3vh;
  width: 3vh;
}

.landing-logo {
  position: absolute;
  transform: translate(-50%, -50%);
  height: 3.5vh;
  width: 7vh;
}

.menu {
   position: absolute;
   top: 10px;
   right: 10px;
}

.menu a {
   color: #ffffff;
   margin-left: 15px;
}

/* Font Google Roboto */
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: .6rem;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: .7rem;
  font-style: normal;
}

.roboto-cat {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: .6rem;
  color:gray;
}

.roboto-catt {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: .7rem;
  color:white;
}

@media (min-width: 576px) {
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 1.2rem;
    font-style: normal;
  }
  .roboto-cat {
    font-size: .9rem;
  }
  .roboto-catt {
    font-size: 1.0rem;
  }
  .roboto-thin {
    font-size: .9rem;
  }
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3rem;
}

.roboto-regularmini {
  font-family: "Roboto", sans-serif;
  font-weight: 450;
  font-style: normal;
  font-size: .75rem;
  color: gray;
}

.roboto-regularminit {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: .75rem;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 2.8rem;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.barlow-black {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: calc(1.5rem + 2.5vw);
}
@media (min-width: 1200px) {
  .barlow-black {
    font-size: 5.0rem;
  }
}

.barlow-light {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(.5rem + 1.8vw);
  margin-top: -.5rem;
}
@media (min-width: 1200px) {
  .barlow-light {
    font-size: 2.0rem;
  }
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.teko-regular {
  font-family: "Teko", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.7rem;
}

.icon-bottom-right {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 24px; /* Ajusta el tamaño del icono según sea necesario */
  color: #fff; /* Cambia el color del icono si es necesario */
}

.icon-bottom-right2 {
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 24px; /* Ajusta el tamaño del icono según sea necesario */
  color: #fff; /* Cambia el color del icono si es necesario */
}

.icon-bottom {
  font-size: 12px; /* Tamaño base para pantallas pequeñas */
}

@media (min-width: 576px) {
  .icon-bottom {
      font-size: 13px; /* Tamaño para pantallas pequeñas y medianas */
  }
}

@media (min-width: 768px) {
  .icon-bottom {
      font-size: 14px; /* Tamaño para pantallas medianas y grandes */
  }
}

@media (min-width: 992px) {
  .icon-bottom {
      font-size: 15px; /* Tamaño para pantallas grandes */
  }
}

@media (min-width: 1200px) {
  .icon-bottom {
      font-size: 16px; /* Tamaño para pantallas muy grandes */
  }
}

a:link, a:visited, a:active {
  text-decoration:none;
}

input::placeholder {
  color: #dddbdb !important; /* Cambia esto al color que prefieras */
  font-size: 10px;
  opacity: 1;
}

textarea::placeholder {
  color: #dddbdb !important; /* Cambia esto al color que prefieras */
  font-size: 10px;
  opacity: 1;
}

.text-menu {
  font-family: "Roboto", sans-serif;
  font-size: 7px; /* Tamaño base para pantallas pequeñas */
  color: #fff; /* Cambia el color del icono si es necesario */
}

@media (min-width: 576px) {
  .text-menu {
    font-family: "Roboto", sans-serif;
    font-size: 8px; /* Tamaño para pantallas pequeñas y medianas */
      color: #fff; /* Cambia el color del icono si es necesario */
  }
  input::placeholder {
    font-size: 13px;
  }
  textarea::placeholder {
    font-size: 13px;
  }
  
}

@media (min-width: 768px) {
  .text-menu {
      font-size: 10px; /* Tamaño para pantallas medianas y grandes */
      color: #fff; /* Cambia el color del icono si es necesario */
  }
}

@media (min-width: 992px) {
  .text-menu {
      font-size: 11px; /* Tamaño para pantallas grandes */
      color: #fff; /* Cambia el color del icono si es necesario */
  }
}

@media (min-width: 1200px) {
  .text-menu {
      font-size: 12px; /* Tamaño para pantallas muy grandes */
      color: #fff; /* Cambia el color del icono si es necesario */
    }
}

.img-zoom img {
  -webkit-transition:all .9s ease; /* Safari y Chrome */
  -moz-transition:all .9s ease; /* Firefox */
  -o-transition:all .9s ease; /* IE 9 */
  -ms-transition:all .9s ease; /* Opera */
  /* width:100%; */
}
  
.img-zoom:hover img {
  -webkit-transform:scale(1.025);
  -moz-transform:scale(1.025);
  -ms-transform:scale(1.025);
  -o-transform:scale(1.025);
  transform:scale(1.025);
}

.img-zoom {/*Ancho y altura son modificables al requerimiento de cada uno*/
  overflow:hidden;
}