* {
 margin: 0px;   /*recomendado hacer siempre*/
 padding: 0px;
 font-family: Arial, Helvetica, sans-serif ;  /*estos son para PC MAC y Linux*/
 font-weight: normal;
	}

.contenedorG{
      background-color: white;  /*dejar en White*/
      height:90px;
      width:100%;
      position:fixed; /*este es posicion fija, no se mueve de la pantalla*/
      top:0px;  /*se debe poner top para q sea visible con fixed*/
      box-shadow: 0px 4px 4px #909090; /*hace la sombra debajo del DIV (izq-der) (arriba-abajo)(radio)*/
      z-index: 1;   /* hace q se ponga  encima */
  }

  #logoAut{
     width:380px;
 }

  .contd2{
      width: 86%;
      height: 90px;
      margin: auto;
      display: flex;
      justify-content: space-between;  /*desplazar a los extremos*/
      align-items: center;    /*sin esto no se centra en vertical y la img se alarga*/
 }


.contd_telf1{
   color: #404040;
   margin-right: 10px;
}

.logo_cel{
   display:flex;
   white-space: nowrap; /*Esto hace q no se partan en 2 lineas un texto cuando se encoje el contenedor*/
      }

   .logo_cel p{padding-top: 5px;}

	.logo_cel img{
			margin-left: 25px;
			margin-right: 5px;
			height:25px;
		}

	.logo_correo{
			display:flex;
			justify-content: flex-end;  /*es para alinear cuando tienes varios items img y texto x ejemplo*/
			margin-top: 5px;
		}

	.logo_correo img{
			height:15px;
			margin-right: 5px;
			margin-top: 1px;
		}


nav{
   margin-top: 90px; /*sin esto se mete adebajo del contenedorG*/
	height:30px;
	background-color: #454545;
	}

.nav1{
	padding-top:6px;
	padding-right:5%;
   text-align: right;
	}

.nav1 a{
   margin-right:40px;
	text-decoration: none;   /*quita el subrayado */
	color: white;
   cursor: pointer;  /*es para q solo de mano a el contacto*/
	}

#nai:hover{color: rgb(50,170,230);}
#nad:hover{color: rgb(50,170,230);}
#nac:hover{color: rgb(50,170,230);}

.menu-carousel{display:flex;}   /*es para q carousel y prod pasen a derecha de menu */

.menuI{
	width:260px;
	margin-left: 7%;
   text-align: center;
	}

.menuS a{
   border-radius: 5px;
   width:260px;
   text-align: center;
	display:block;
	text-decoration: none;   /*quita el subrayado */
	font-size: 18px;
	margin-top: 5px;
	padding-top: 11px;
	padding-bottom: 11px;
	background-color: rgb(50,170,230);  /*color de Automasis*/
	color:white;
   box-shadow: 0px 3px 2px #606060;/*hace la sombra debajo (izq-der) (arriba-abajo)(radio)*/
}

#bot1:hover{background-color: #328DC8;}
#bot2:hover{background-color: #328DC8;}
#bot3:hover{background-color: #328DC8;}
#bot4:hover{background-color: #328DC8;}
#bot5:hover{background-color: #328DC8;}
#bot6:hover{background-color: #328DC8;}
#bot7:hover{background-color: #328DC8;}
#bot8:hover{background-color: #328DC8;}
#bot9:hover{background-color: #328DC8;}

#bot1:focus{box-shadow: 0px 1px 1px #606060; background-color: #454545;}
#bot2:focus{box-shadow: 0px 1px 1px #606060; background-color: #454545;}
#bot3:focus{box-shadow: 0px 1px 1px #606060; background-color: #454545;}
#bot4:focus{box-shadow: 0px 1px 1px #606060; background-color: #454545;}
#bot5:focus{box-shadow: 0px 1px 1px #606060; background-color: #454545;}
#bot6:focus{box-shadow: 0px 1px 1px #606060; background-color: #454545;}
#bot7:focus{box-shadow: 0px 1px 1px #606060; background-color: #454545;}
#bot8:focus{box-shadow: 0px 1px 1px #606060; background-color: #454545;}
#bot9:focus{box-shadow: 0px 1px 1px #606060; background-color: #454545;}

#letpro{
   font-size:19px; color: #454545; margin-top: 8px; margin-bottom:8px;
}

#catalogo p{font-size:19px; color: #454545; margin-top: 12px; margin-bottom:8px;}



#letpro2{ font-size:18px; color: rgb(50,170,230); margin-top: 15px;
   text-align: center; font-weight: normal;}

  .vertical{
     margin-left: 30px;
     width:64%;
          }

 .carousel{
      margin-top: 35px;
      width: 100%;
      position:relative; /* permite q elemt se interpongan uno encima de otro*/

      -webkit-user-select: none;  /* estas 4 lineas es pa q no se pueda seleecionar el texto */
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
         }

#foto{width:100%;}  /* para q sea slide responsive */

#numer{
   display:flex;
   position: absolute;
   top: 87%;
   width: 180px;
   padding-left: 10px;
   }

#play-stop{
   display: flex;   /* esto centra los 2 botones*/
   justify-content: space-between;
   position: absolute;
   top: 45%;
   width: 100%;
   }

.ft1{
      background-color: lightgray;  /* es para q empiece de color la 1 */
   }

.btn{
   border: 1px solid lightgray;
   border-radius: 50%;
   margin: 5px 3px 0 3px;
   width: 12px;
   height: 12px;
   cursor:pointer;
   }

.circulo2{
      border: 2px solid lightgray;
      border-radius: 50%;
      margin: 0 5px 0 5px;
      width: 40px;
      height: 40px;
      cursor:pointer;
      box-shadow: 0 0 10px rgba(255,255,255,.6);
      transition: all .3s ease;
      }
.btn2{
   width:12px;
   margin: 11px 0 0 12px;
}
.btn3{
   width:12px;
   margin: 12px 0 0 16px;
}
.circulo2:hover{
   transform: scale(1.1,1.1);
}

  .produc{
    margin-top: 15px;
    width: auto;
    display: flex;
    flex-wrap: wrap;  /*esto hace q el flex no se vaya de largo y haga otra fila abajo*/
    justify-content: space-between;  /*apilar a la izquierda y en filas*/
         }

    .produc div{
      width:31%;
      margin-bottom: 25px;
      border: 1px solid lightgray;
      text-align: center;
      transition: 0.4s;
         }

    .prodf{
      margin-top:20px;
      width: 90%;  /*ancho de imagenes*/
         }

   .prod1:hover{border: 1px solid rgb(50,150,230);
      box-shadow: 0px 0px 9px #606060;/*hace la sombra debajo (izq-der) (arriba-abajo)(radio)*/
      transition: 0.4s;}

   .prod2:hover{border: 1px solid rgb(50,150,230);
      box-shadow: 0px 0px 9px #606060;/*hace la sombra debajo (izq-der) (arriba-abajo)(radio)*/
      transition: 0.4s;}

   .prod3:hover{border: 1px solid rgb(50,150,230);
      box-shadow: 0px 0px 9px #606060;/*hace la sombra debajo (izq-der) (arriba-abajo)(radio)*/
      transition: 0.4s;}

   .prod4:hover{border: 1px solid rgb(50,150,230);
      box-shadow: 0px 0px 9px #606060;/*hace la sombra debajo (izq-der) (arriba-abajo)(radio)*/
      transition: 0.3s;}

   .prod5:hover{border: 1px solid rgb(50,150,230);
      box-shadow: 0px 0px 9px #606060;/*hace la sombra debajo (izq-der) (arriba-abajo)(radio)*/
      transition: 0.3s;}

   .prod6:hover{border: 1px solid rgb(50,150,230);
      box-shadow: 0px 0px 9px #606060;/*hace la sombra debajo (izq-der) (arriba-abajo)(radio)*/
      transition: 0.3s;}

   .prod7:hover{border: 1px solid rgb(50,150,230);
      box-shadow: 0px 0px 9px #606060;/*hace la sombra debajo (izq-der) (arriba-abajo)(radio)*/
      transition: 0.3s;}

   .prod8:hover{border: 1px solid rgb(50,150,230);
      box-shadow: 0px 0px 9px #606060;/*hace la sombra debajo (izq-der) (arriba-abajo)(radio)*/
      transition: 0.3s;}

   .prod9:hover{border: 1px solid rgb(50,150,230);
      box-shadow: 0px 0px 9px #606060;/*hace la sombra debajo (izq-der) (arriba-abajo)(radio)*/
      transition: 0.3s;}


    .produc h3{
      margin-top:20px;
      color: rgb(50,150,230);  /*color de Automasis + osc */
      font-size: 16px;
         }

   .cont{position: relative;}/*este es para q funcione un div como enlace*/

   #enlace{
      position: absolute; /*este es para q funcione un div como enlace*/
      top:0;
      left:0;
      width: 100%;
      height: 100%;
         }

    .ver{
      top:95%;
      width:30px;
      margin-left: 75%;
      opacity: .3;
        }


    .cliente p{
      padding-top: 10px;
      text-align: center;
      margin-bottom: 20px;
      background-color: #454545;
      height:30px;
      color:white;
        }

    .Kiosco{
       width:100%;
       margin: auto;
       overflow: hidden;
        }

    .Kiosco ul{
       display:flex;
       width: 600%;
       animation: carlos 60s infinite linear;
        }

    .Kiosco li{
       width: 100%;
       list-style: none;
         }

.Kiosco img{width:100%;}

@keyframes carlos{
        0%{ margin-left: 0;}
        100%{ margin-left: -500%;}
         }

#mapa{
      height:450px;
      background-color: #454545;
      display:flex;
      align-items: center;
      justify-content: center;
    }

.googlem{
      width: 500px;
      height: 400px;
      margin-left: 20px;
   }

.formul{
     /* background-color: lightgray; */
     width: 400px;
     height: 400px;
     margin-left: 80px;
 }

form{
   width:400px;
   margin:auto;
   padding: 10px 20px;
   box-sizing: border-box;
}

form h1{
   color: white;
   font-weight: normal;
}

.formul input,textarea{
   width: 100%;
   margin-top: 20px;
   padding: 7px;
   box-sizing: border-box;
   border: none;
   border-radius: 3px;
}

textarea{
   min-height: 120px;
   max-height: 120px;
   max-width: 100%;
   resize: none;  /*bloquea el tamaño*/
}

#boton{
   background-color: rgb(10,150,200);  /*color de Automasis*/
   color: white;
   padding: 15px;
   cursor: pointer;
}

#boton:hover{background-color: gray;}

footer{
      /* height:110px; */
      background-color: rgb(10,150,200);  /*50,170,230 color de Automasis*/
      display: flex;
      justify-content: center;
    }

   #footer0{
      width: 70%;
      color:white;
      -webkit-user-select: none;  /* estas 4 lineas es pa q no se pueda seleecionar el texto */
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
   }

   #footer1{
      margin: 10px 0 10px;
      height:60px;
      display:flex;
      justify-content: space-between;  /*apilar a la izquierda y en filas*/
   }

   #dir{
      width: 300px;
      font-size: 12px;
      font-style: italic;
      display:flex;
      align-items: center;
   }

   #dir img{
      width: 20px;
      margin: 0 8px 10px 0;
   }

   #logf{width: 200px; padding-top: 10px;}

   #social{
      width: 140px;
      padding-left: 10px;
   }

   #social p{
      margin-bottom:10px;
      font-size: 13px;
   }

#redes img{
   width: 28px;
   filter: opacity(.4);
   transition: .5s;
}

   #fac:hover {filter: opacity(1); transition: .5s;}
   #twi:hover {filter: opacity(1); transition: .5s;}
   #you:hover {filter: opacity(1); transition: .5s;}
   #lin:hover {filter: opacity(1); transition: .5s;}

   #copir{
      text-align: center;
      font-size: 11px;
      margin: 20px;
   }

    #whatsapp img{
      width:80px;
      position:fixed; /*este es posicion fija, no se mueve de la pantalla*/
      left:8px;   /*se puede poner en px o %*/
      top:70%;  /*se debe poner top para q sea visible con fixed*/
      }


  #bsube{
    display:none;   /*1ero desaparece para q JS lo muestre en scroll*/
    background-color: #505050;
    opacity: .4;
    border-radius: 5px;
    padding: 15px 15px 18px 15px;
    box-shadow: 0 0 10px rgba(255,255,255,.6);
    cursor: pointer;
    width:20px;
    position:fixed; /*este es posicion fija, no se mueve de la pantalla*/
    right:2%;   /*se puede poner en px o %*/
    top:85%;  /*se debe poner top para q sea visible con fixed*/
 }

@media(max-width: 1100px){  /*esto es responsive para 1024*/
               .vertical{width:58%;}
               .produc div{width:31%;}
               }

@media(max-width: 960px){  /*esto es responsive para tablet*/
         #logoAut{ width:300px; }
         .contd_telf1 p{font-size: 12px;}
         nav{margin-top: 90px;}
         .menuI{
            width: 87%;
            display: flex;
            justify-content: space-between;  /*desplazar a los extremos*/
         }
         .menu-carousel{flex-direction: column;}
         .vertical{width:92%;}
         .produc div{width:46%;}
         #mapa{
            height: auto;
            width: auto;
            flex-direction: column;
            padding-top: 20px;
            padding-bottom: 20px;
            align-items: flex-start;
            }
            .formul{width: auto;}
            form{width: auto;}
      }

@media(max-width: 750px){  /*esto es responsive para moviles*/
         #numer{display:none;}  /* desaparece # en Moviles */
         #play-stop{top:45%;}

         #logoAut{ width:350px;}   /* tamaño normal */
         .contd_telf1{display:none;} /* desaparece */
         #logf{display:none;} /* desaparece */
         nav{margin-top: 0px;}
         .contenedorG {position:static;} /*deja de ser fijo*/
         .menu-carousel{flex-direction: column;}
         .carousel{width:95%;}
         .menuI{
            flex-direction: column;
            align-items: center;
         }
         .vertical{width:92%;}
         .produc div{width:95%;}
         #footer0{width: 95%;}

         .googlem{margin-left: 0px; width: 360px; height: auto;}
         .googlem iframe{width: 360px; height: 288px;}
         #lin{display: none;}
         #bsube{right:45%;}

   }