body, html{
    font-size: 16px;
    
}
#imgFondo{
    background-attachment: fixed;
}

h1{
    width:100%;
    font-weight: 600;
}

h2{
    width: 100%;
    font-size: 2.5em;
    font-weight: 600;
}

h3{
    width: 100%;
    font-size: 1.8em;
    margin: auto;
    font-weight: 400;
}

.contenedor {
    max-width: 1366px;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px 20px;
    color: white;
}

.contenedor .productos {
    flex: 1 1 calc(25% - 20px);
    margin: 10px;
    border-radius: 25px;
    box-shadow: 5px 5px 8px 3px #2d2c2c;
    padding: 15px 20px;
    background-color: #2e4261;
    box-sizing: border-box;
}


.contenedor .productos .prodImg img {
    width: 100%;
    cursor: pointer;
}



.contenedor .trabajo{
    width:27%;
    border-radius: 25px;
    box-shadow: 5px 10px 8px  #2d2c2c;
}

.contenedor #cuadros{
    background: url('https://rosersistemas.es/images/cuadroElectrico.jpg') no-repeat;
      background-repeat: no-repeat;
      background-size: cover;
    background-position: center;
}

.contenedor #circuitos{
    background: url('https://rosersistemas.es/images/circuitoElectronico.jpg') no-repeat;
      background-repeat: no-repeat;
      background-size: cover;
    background-position: center;
}

.contenedor #humidificador{
    background: url('https://rosersistemas.es/img/humidificador ros-x-4000.webp') no-repeat;
      background-repeat: no-repeat;
      background-size: cover;
    background-position: center;
}

.contenedor .trabajo .colorFondo{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    padding:40% 0;
    border-radius: 25px;
    
}

.contenedor .trabajo .colorFondo:hover{
    background-color: rgba(38, 45, 151, 0.3);
}

.contenedor .trabajo .colorFondo h3{
    margin: auto;
    color: white;
    font-size: 1.5em;
    text-shadow: 1px 0 5px #000;
}

#pruebalo{
    margin-top: 50px;
    background: url('https://rosersistemas.es/img/imgPruebalo.jpg') no-repeat;
      background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.colorFondo {
    background-color: rgba(0,0,0,0.3);
    color: white;
}

#pruebalo p{
    font-size: 1.3em;
}


#cajaFormularioContacto{
    width: 80%;
    margin-bottom: 50px;
}

#auxFlexFormularioContacto{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#cajaFormulario{
    width: 65%;
    background: #344B6E;
    padding: 20px 10px;
    border-radius: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    box-shadow: 5px 10px 8px  #4d4d4d;
    color: white;
}
#cajaDatosContacto{
    width: 30%;
}

#cajaDatosContacto #auxDatosContacto{
    padding: 60px 0 30px 0;
}

iframe{
    width: 100%;
    border: 1px solid gray;
}

.camposForm{
    width: 40%;
    color: #fff;
      font-size: 1em;
      border: 0;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0px;
      border-bottom: 1px solid #fff;
      outline: 0;
      resize: none;
      padding: 2% 0 2% 0;
      background: #344B6E;
      margin-bottom: 3%;
}
#campoComentarios {
  width: 90%;
  color: #fff;
  font-size: 1em;
  border: 0;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0px;
  border-bottom: 1px solid #fff;
  outline: 0;
  resize: none;
  padding: 2% 0 2% 0;
  background: #344B6E;
  margin-bottom: 3%;
}
#cajaPolitica{
    background: #344B6E;
    width: 70%;
}
#btnEnviarFormulario{
    width: auto;
    height: fit-content;
      font-size: 1em;
      border: 0;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0px;
      border-bottom: 1px solid #fff;
      outline: 0;
      resize: none;
    cursor: pointer;
      background: #344B6E;
}
.mitadimg{
    width: 50%;
    height: 200px;
}
.mitadOsc{
    width: 50%;
    background-color: #6381AD;/*545E6E*/
    height: 200px;
}

.caracteristicas{
    width: 40%;
    display: flex;
    justify-content:left;
    flex-wrap: wrap;
    padding-top: 20px;
}

.caracteristicas i{
    font-size: 3.3em;
    margin-right: 40px;
    width: auto;
}

.textoCarac{
    width: 70%;
    text-align: left;
}

#cajaAvisoPoliticas{width:50%;height:50%;position:fixed;padding:1% 0 1% 1%;top:80%;left:50%;margin-top:-25%;margin-left:-25%;display:none;z-index:1005;background-color:#fff;font-family:Montserrat,sans-serif;font-size:.8vw}
#cajaAvisoPoliticas .cerrarVentana{width:3%;margin:-1.5% 1% 0 0;clear:both}
#cajaAvisoLegal{width:47.5%;height:100%;padding-right:1%;float:left;overflow-y:scroll;margin-right:3%}
#cajaPoliticaPrivacidad{width:47.5%;height:100%;padding-right:1%;float:left;overflow-y:scroll}
.titulosAvisoPolitica{padding:5%;font-size:1vw;color:#fff;text-align:center;background-color:#0f1a4a;margin-bottom:5%}
.textosAvisoPolitica{text-align:justify}
.cerrarVentana{width:7%;float:right;cursor:pointer;margin:-1.5% 3.5% 0 0}
#cajaMsgErrorPoliticaPrivacidad{width:100%;padding:3%;margin:auto;text-align:center;color:red;text-shadow:#000 .1em .1em .2em;background-color:red;color:#fff;box-shadow:0 0 10px grey;font-size:.8vw;display:none}
#capaOscurecedora1{width:100%;height:100%;position:fixed;top:0;left:0;background-color:#000;display:none;z-index:999;opacity:.8}
.linkAvisosPoliticas{color: white;}

#imagenes{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#imagenes .contImg{
    display: flex;
    width: 50%;
}

#imagenes .contImg .imgSquare{
    min-width: 50%;
}

#imagenes .contImg .imgReal{
    min-width: 100%;
}

#rosxcuatro{
    background: url('https://rosersistemas.es/img/rosx4000copia.webp');
    background-position: center;
    background-size: cover;
}

#panaderia{
    background: url('https://rosersistemas.es/img/pan.webp') no-repeat;
    background-position: center;
    background-size: cover;
}

#fruteria{
    background: url('https://rosersistemas.es/img/fruteria.webp') no-repeat;
    background-position: center;
    background-size: cover;
}

#bodega{
    background: url('https://rosersistemas.es/img/bodega.webp') no-repeat;
    background-position: center;
    background-size: cover;
}

#pescaderia{
    background: url('https://rosersistemas.es/img/pescaderia.webp') no-repeat;
    background-position: center;
    background-size: cover;
}

#fabrica{
    background: url('https://rosersistemas.es/img/fabrica.webp') no-repeat;
    background-position: center;
    background-size: cover;
}

#farmacia{
    background: url('https://rosersistemas.es/img/farmacia.webp') no-repeat;
    background-position: center;
    background-size: cover;
}

#tejido{
    background: url('https://rosersistemas.es/img/tejido.webp') no-repeat;
    background-position: center;
    background-size: cover;
}

#cuadernos{
    background: url('https://rosersistemas.es/img/cuadernos.webp') no-repeat;
    background-position: center;
    background-size: cover;
}

#imagenes .imgSquare p{
    color: white;
    margin: auto;
    font-size: 1.7em;
    padding-top: 40%;
    text-shadow: 1px 0 5px #000;
}

.osc1{
    border-bottom-left-radius: 20px;
}

.osc2{
    border-top-right-radius: 20px;
}

.flotante{
    padding: 0;
    position:absolute;
}

.icon{
    width: 25%;
    padding-right: 10px;
}

.icon svg{
    width: 80%;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(87deg) brightness(119%) contrast(119%);
}

.movil{
    width: 20%;
    margin-right: 20px;
}

.certificado{
    width: 33%;
    padding-top: 20px;
}
.certificado img{
    width: 60%;
}

#infoEmail a {
color: white;
}

@media screen and (max-width: 980px) {
    .contenedor .trabajo .colorFondo h3 {
        font-size: 1.2em;
    }
}

@media screen and (max-width: 768px) {
    .contenedor{
        width: 100%;
    }
    #pruebalo .colorFondo .contenedor{
        width: 95%;
    }
    .contenedor .trabajo .colorFondo h3 {
        font-size: 4vw;
    }
    .caracteristicas{
        width: 80%;
    }
    .caracteristicas i{
        margin:auto;
        margin-bottom: 20px;
    }
    .textoCarac{
        width: 100%;
        text-align: center;
    }
    #imagenes .contImg {
      width: 100%;
    }
    .mitadimg {
          width: 0;
        border-radius: 0;
    }
    .mitadOsc {
         width: 100%;
        border-radius: 0;
        height: 220px;
    }
    #cajaFormulario {
        width: 100%;
    }
    .camposForm {
          width: 90%;
    }
    #cajaPolitica {
        width: 90%;
    }
    #btnEnviarFormulario {
        margin-top: 30px;
    }
    #cajaDatosContacto {
      width: 100%;
    }
    h2 {
        font-size: 2em;
        margin-top: 40px;
    }
    #imagenes .imgSquare p{
        font-size: 4vw;
    }
    .icon{
        width: 50%;
        margin: auto;
    }

    .icon svg{
        width: 90%;
    }
    
    .movil{
        width: 45%;
    }
    .contenedor .trabajo{
        width: 80%;
        margin-top: 30px;
    }
    
    .certificado{
    width: 80%;
    }
    
}