* {
 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{cursor: pointer;}
#bot5{background-color: #454545;    /*BOTON 1 PRESIONADO*/
      box-shadow: 0px 1px 1px #606060;}

#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 {margin-bottom:20px;}
#catalogo p{font-size:19px; color: #454545; margin-top: 12px; margin-bottom:8px;}


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

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

  .produc{
    margin-top: 25px;
    width: auto;
    color: #fff;
         }

    .produc div{
      width:100%;
      margin-bottom: 30px;
      background-color: rgb(50,170,230);
      display: flex; /*hace q se pase a la derecha*/
      box-sizing: border-box;
         }

   #intro{
      background-color: #FFF;
      text-align: justify;
      color: gray;
   }

    .prodf{
      margin:20px 0 20px 20px;
      width: 300px;  /*ancho de imagenes 240x210 270x236  300x262 */
      height: 262px; /*sin esto la img se alarga*/
      }

    .produc h2{
      margin:20px 0 20px;
      color: #fff;
      font-size: 20px;
         }

   .descrip{
      flex-direction: column;
      margin-left: 20px;
      padding-right: 20px;}

   .descrip p{text-align: justify;}




#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%;}
               }

@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*/

         #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;}
         .menuI{
            flex-direction: column;
            align-items: center;
         }
         .vertical{width:92%;}
         .prodV{flex-direction: column;}  /*esto hace q el texto pase abajo de la img*/
         .produc div{width:95%;}
         .prodf{width: 91%; height: 91%;}
         #footer0{width: 95%;}

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