html {
  scroll-behavior: smooth; 
}
.Background{
    width: 100%;
    min-height: 100%;
    background: linear-gradient(to bottom right, #4D5C61, #D1DFDF, #4D5C61);
    background-repeat: no-repeat;
    background-size:auto;
    position: fixed;
    left: 0px;
    top:0px;
    z-index:-99;
}
.Menu_Superior{
    min-width: 99%;
    height: 70px;
    background-color: #515266;
    position: absolute;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

}
.parte-interior{
  max-width: 99.5%;
  min-width: 99.5%;
}
.module-superior {
    left: 0px;
    position: absolute;
	  left: 0px;
    top:0px;
    padding: 3px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .border-wrap{
    background: linear-gradient(to right, #724B4A,#DEA093,#724B4A);
    padding: 3px;
  }
  
  .module {
    background: #222;
    color: white;
    padding: 2rem;

  }
  .Menu_Superior_text{
    color:white;
    text-align: right;
    float: right;
    margin-right: 7%;
    margin-top: 25px;
    text-decoration: none;
    list-style-type:none;
    font-size:auto;
    font-family: system-ui, "Monserrat"
  }
  .Menu_Superior_text:hover{
    color:#DEA093;
    cursor: pointer;
  }
  .Imagen-Logo{
    height: 90%;
    margin-top: 2px;
    margin-left: 15px;

  }
  .SawatechLogo{
    font-size: 200%;
    font-family: system-ui, "Monserrat";
    font-weight: lighter;
    background: linear-gradient(to right, #724B4A,#DEA093,#724B4A);
    margin-left: 20%;
    top: -15px;
    position: relative;
    -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
     -webkit-text-stroke-width: 1px;
     -webkit-text-stroke-color: rgba(8, 8, 8, 0.362);
  
  }
  .Separador-out{
    width: 100%;
    height: 60px;;
    padding:10px;
    margin-bottom: 2px;
    margin-top: 20px;
    float:inline-end;
  }
  .Separador-in {  
    width: 90%;
    margin-left: 5%;
    height: 3px;
    background: linear-gradient(to right, #724B4A,#DEA093,#724B4A);
  }
  
  .Landing{
    
    min-height: 98vb;
    max-height: 98vb;
    min-width: 100%;
    max-width: 100%;
    }
    .Landing-content{
      height: 98vb;
      height: 98vb;
    }
  
  .Servicios{
    padding-top: 5%;
    padding-bottom: 5%;
    max-height: 98%;
    min-height: 98%;
    min-width: 100%;
    max-width: 100%;
    position: absolute;
    text-align: center;

  }

  .Descripcion{
    margin-left: -5%;
    font-size:20px;
    font-weight: lighter;
    font-family: system-ui, "Monserrat";
  }
  .titulo{
    text-align: center;
    width: 95%;
    min-width: 95%;
    border-width: 1px;
    font-family: system-ui, "Monserrat";
  }
  .titulo-sup{
    color: #724B4A;
    font-size:28px;
  }
  
  .module-services{
    width: 20vw;
    height: 30vh;
    position: relative;
    padding: 3px;
    margin-left: 8%;
    margin-top: 20px;
    float: left;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    margin-bottom: 400px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.5);
  }
  .module-services:hover{
    box-shadow: 3px 4px 2px 1px rgba(0, 0, 0, 0.6);
  }
  .module-services-interior{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #515266;
    border-radius: 10px;
    cursor: pointer;
    
  }
  .module-equipo{
   
    width: 15vw;
    height: 30vh;
    position: relative;
    padding: 3px;
   /* margin-left:12%;*/
    margin-top: 20px;
    float:left;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.5);
  }
  .ContenedorEquipo{
    max-width: 15vw;
    float: left;
    margin-left:12%;
    text-align: center;
    color:#6B4544;
    font-size: 20px;
    font-family: system-ui, "Monserrat";
    /*
    border-color: white;
    border-width: 1px;
    border-style: solid;
    */
  }
  .module-equipo-interior{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #515266;
    border-radius: 10px;
    
  }
  .titulo-in{
    margin-top: 25px;
    color: #160e0e;
    font-size:15px;
    margin-top: 10px;
    width: 100%;
    min-width: 100%;
    font-family: system-ui, "Monserrat";
  
  }
  .rTitulo{
    font-weight: bold;
    
  }

  .Equipo{
    margin-top: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    min-width: 100%;
    max-width: 100%;
  
    position: absolute;
    float: inline-end;
    text-align: center;
  }
  
  .subtitulo-mid{
    margin-bottom: 50px;
  }
  .Casos{
    
      margin-top: 180vh;
      max-height: 100vh;
      min-height: 100vh;
      min-width: 100%;
      max-width: 100%;
    
      position: absolute;
      float: inline-end;
      text-align: center;
    
  }
.msistemas{
  background: linear-gradient(to bottom, rgb(0 0 0 / .2),rgb(0 0 0 / .2)),url(../imagen/Sistemas.jpg);
  background-repeat: no-repeat;
  background-size:100% 100%;
}
.mgestion{
  background: linear-gradient(to bottom, rgb(0 0 0 / .2),rgb(0 0 0 / .2)),url(../imagen/Gestion.jpg);
  background-repeat: no-repeat;
  background-size:100% 100%;
}
.mdisenio{
  background: linear-gradient(to bottom, rgb(0 0 0 / .2),rgb(0 0 0 / .2)),url(../imagen/Disenio.jpg);
  background-repeat: no-repeat;
  background-size:100% 100%;
}
.muser{
  background: linear-gradient(to bottom, rgb(0 0 0 / .2),rgb(0 0 0 / .2)),url(../imagen/users.png);
  background-repeat: no-repeat;
  background-size:100% 100%;
}

.cargando{ 
  position: relative; 
  color: #FFF;
  margin-top: 2em;
  letter-spacing: 0.08em;
  text-transform: uppercase
}
.contenedor-loader{  
  height: 6em;
}
#contenedor{ 
  background-color: #454545f4; 
  display: grid;
  place-content: center;
  height: 100vh;
  color: #000;
  position: fixed;
  width: 100%;
  z-index: 125;
  top:0px;
  left: 0px;
}
.popup{
  background-color: #5152668a; 
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  z-index: 10;
  top:0px;
  position: fixed;
  display: none;
}
.interiorPopUp{
  min-width: 80%;
  min-height: 90%;
  max-width: 80%;
  max-height: 90%;
  background:  linear-gradient(to bottom right, #4D5C61, #D1DFDF, #4D5C61);
  margin-left: 10%;
  margin-top: 2%;
  border-color: #724B4A;
  border-width: 2px;
  border-style: solid;
  position: fixed;
}

.loader,
.loader:before,
.loader:after {
  background: #FFF;
  animation: cargando 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
}
.loader {
  text-indent: -9999em;
  margin: 40% auto;
  position: relative;
  font-size: 11px;
  animation-delay: 0.16s;
}
.loader:after {
  left: 1.5em;
  animation-delay: 0.32s;
}
.ocultarCargando
{
 
  animation: cargandoFin 1s 1 forwards;

  
}
@keyframes cargando {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #FFF;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em #ffffff;
    height: 5em;
  }
}
@keyframes cargandoFin {
  0%{
    opacity: 100%;

  }
  50%{
    opacity: 50%;
  }
  100%{
    opacity: 0%;
    visibility: hidden;
  }
}
.footer{
  left:0;
  width:100%;
  height:50px;
  line-height:30px; 
  background-color: #515266;
  color:white;
  text-align:center;
  margin-top: 280vh;
  max-height: 20vh;
  min-height: 20vh;
  min-width: 100%;
  max-width: 100%;
  font-family: system-ui, "Monserrat";
  font-weight: lighter;
  position: absolute;
  float: inline-end;
  text-align: center;
  display: flex;
}
.footer div{
  flex-direction: row;
  margin: auto;
}
.footer-logo{
  width:15vb;
}
.titulo-ft{
  color:#ffffff;
  margin-top: 0px;
  font-weight: 600;
  font:bold;
  font-size: large;
}
.redes img{
  width: 50px;
  height: auto;
  padding: 10px;
}
#InfoPagina{
	margin-top: 300vh;float: inline-end;position: absolute;
	 font-family: system-ui, "Monserrat";
	 color: #515266;
	 text-align:center;
	 width:100%;
}

/*A partir de aqui hay que hacer el refinado para las distintas resoluciones*/