/*  */

/* En el archivo HTML se definen divisiones las cuales tienen nombres diferentes y aquí es en donde se les da formato. */

/* Los colores se escriben en el sistema hexadecimal */

/* NOTA: Se pueden descargar las imágenes a la carpeta de css y basta con poner el nombre de la imagen, sin el URL completo*/

/* 3colores: azul marino logo, azul cielo logo y azul claro:*/
/*background: linear-gradient(to right, rgba(70,107,170,1) 0%, rgba(70,107,170,1) 25%, rgba(85,167,221,1) 66%, rgba(44,181,226,1) 99%, rgba(44,181,226,1) 100%); */
@charset "UTF-8";

body
{
  background: #FFFFFF; /*Fondo blanco*/
}

img
{
  border:0;
}


/*Formato de los títulos de cada página*/
h1
{
  /*padding:5px 5px 5px 5px; /* padding es un espacio que hay entre el marco después del margen y el contenido de la página. Los valores de los espacios se escriben: top right bottom left (en el sentido de las manecillas del reloj). px = pixeles*/
 /* margin:15px 15px 15px 15px;*/
  /*color:#045FB4; //Color = azul rey (rey + marino) */
  color: #466baa; /*Color: azul fuerte logo*/
  font-size:2em;
  margin-top: 40px;
}

/*Para crear los tabuladores, se aplica una técnica, la cual por medio de 3 bloques de tipo div, vamos a ir agregando de manera animada las imágenes, hasta formar todos los elementos de la imagen.
*/

.TextoInicial /*Brindamos soluciones en control y automatización a la medida */
{
  font-size: 17pt;
  font-weight:bolder;
  /*background:linear-gradient(to right, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 0%, rgba(113,206,239,1) 50%, rgba(183,222,237,1) 100%);*/ /*azules claros*/
  /*background: linear-gradient(to right, rgba(70,107,170,1) 0%, rgba(70,107,170,1) 21%, rgba(43,182,228,1) 100%); /* 2 colores: azul marino logo y azul claro*/
  background: linear-gradient(to right, rgba(43,182,228,1) 0%, rgba(70,107,170,1) 79%, rgba(70,107,170,1) 100%);/* Colores volteados 2 colores: azul marino logo y azul claro*/
  /*background: linear-gradient(to right, rgba(85,167,222,1) 0%, rgba(70,107,170,1) 24%, rgba(70,107,170,1) 100%);*/
  color: #FFFFFF; /*color: blanco*/
  font-weight:bold;
}

.MejorOpc
{
  color: #000000; /*Color: negro*/
  font-weight:bold;
}

.MisionHistoriaMejorOpc /*Texto para las "subsecciones"*/
{
  font-size: 15pt;
  /*color: #035293; /* Color: azul marino*/
  color: #466baa; /*Color: azul fuerte logo*/
  font-weight:bold;
}

.MENU /*Fondo del menú*/
{
  line-height: 4;
  /*padding: 5px 5px 5px 5px;*/
  /*background:linear-gradient(to right, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 0%, rgba(113,206,239,1) 50%, rgba(183,222,237,1) 100%);*/
  background: linear-gradient(to right, rgba(70,107,170,1) 0%, rgba(70,107,170,1) 21%, rgba(43,182,228,1) 100%); /* 2 colores: azul marino logo y azul claro*/
}

.MENU a /*Links/títulos/texto puestos en el menú*/
{
  font-size: 16pt;
  font-weight:bolder;
  color: #FFFFFF; /*color: blanco*/
  font-weight:bold;
}

/*Para cambiar el color del menú de hamburguesa cuando las pantallas son pequeñas*/
.fa.fa-bars {
  color:white;
}

/*Para cambiar el espaciado de las opciones del menú:*/
@media (min-width: 768px)
.navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
}

/*Para cambiar el tamaño del renglón cuando la pantalla es pequeña*/
.MENU a.nav-link {
    display: block;
     padding: 0rem 1rem 0rem 1rem;
}


/*SubMenu*/
.SubMenu a.dropdown-item, 
.SubMenu a.dropdown-item.active /*Texto del submenú*/
{
  line-height: 2;
  font-weight:bolder;
  /*background: #466baa; /*azul fuerte logo*/
  /*color: #2E9AFE;/* Color: azul clarito*/
  color: #55a7dd; /*Color: azul cielo logo*/
  font-weight:bold;
  text-decoration: none;
  /*background-color: #466baa; /*azul fuerte logo*/
}


.Logos img
{
  max-height: 150;
}

.navbar
{
  color: #FFFFFF; /*color: blanco*/
}


/* Formato para el formulario */
#one-column-emphasis
{
  margin: 10px;
  /*Se especifica el ancho de la tabla*/
  width: 380px;
  text-align: left;
  /*Con "collapse" no se dejan espacios entre los renglones y columnas de la tabla.*/
  border-collage: collapse;
}

#one-column-emphasis caption
{
  font-size: 20px;
}


#one-column-emphasis tr:hover td
{
  color:#339;
  background: #eff2ff; /*Color: Azul muy clarito, casi blanco*/
}


/* Slide Múltiple*/
.ultimos-proyectos .container {
  padding-left: 0;
  padding-right: 0; }

.ultimos-proyectos .owl-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: .3rem 0; }

.ultimos-proyectos .owl-prev,
.ultimos-proyectos .owl-next {
  font-size: 3rem;
  margin: 0 .5rem;
  /*color: #12AFAF; color: aqua*/
  /*color: #00BFFF; /*color: azul clarito*/
  color: #55a7dd; /*azul cielo logo*/
  -webkit-transition: all .5s ease;
          transition: all .5s ease; }

.ultimos-proyectos .owl-prev:hover,
.ultimos-proyectos .owl-next:hover {
  /*color: #024784; /*color: azul marino "claro" */
  color: #466baa; /*azul fuerte logo*/
}/*# sourceMappingURL=estilos.css.map */


  /*Fondo Inicio*/
.Inicio
{
  background: url("../imgs/SoldaduraASPRO.jpg") no-repeat center top;
  color: #fff;/*color: blanco*/
  background-position: center;
  background-size: cover;
  background-attachment: fixed !important;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}



/*Botón Play (Clientes)*/
.BotonPlay
{
  /*color: #035293; /* Color: azul marino*/
  color:#380B61;/* Color: morado obscuro*/
  font-weight:bold;
  font-size:70pt;
  margin-top: 10pt;
  margin-left: 10pt;
  /*margin: 70px;
  margin-bottom: 100px;
  margin-right: 70px;
  margin-right: 10pt;
  */
}


/*Texto para alianzas*/
.TextoAlianza
{
  color:#2E2E2E; /*color: gris obscuro*/
  font-size:22px;
  font-weight:bold;
  font-style:italic;
  text-align: justify;
}

.TextoNormal
{
  color:#2E2E2E; /*color: gris obscuro*/
  font-size:17pt;
  text-align: justify;
}

.TextoBlanco /*Texto de la página de inicio*/
{
  color:#FFFFFF; /*color: blanco*/
  font-size:16pt;
  text-align: center;
}

.TextoNaranja /*Para la parte de Kuka*/
{
  width: 580px;
  color: #ff5c00; /*color: Naranja KUKA*/
  text-align: center;
  line-height: 1.5;
  font-size: 40px;
  font-weight:bolder;
  font-weight:bold;
  padding: 0 0.3em;
}


/* Pie de Página */
.piedepagina {
  /*position: fixed;*/
  /*position: absolute;*/
  /*position: relative;*/
  bottom: 0px;
  min-width: 100%;
  /*background: #024784; /*color: azul marino "claro" */
  background: #466baa; /*azul fuerte logo*/
  color: #FFFFFF; /*color: blanco*/
  text-align: center;
  font-size: 11pt;
}

  
.piedepagina .redes-sociales {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.piedepagina .redes-sociales a {
  color: #fff; /*color: blanco*/
  font-size: 2rem;
  margin: 0 .5rem;
  opacity: .7;
  -webkit-transition: all .5s ease;
          transition: all .5s ease;
        }

.piedepagina .redes-sociales a:hover {
  opacity: 1; }


/*---------------------------------------------/*-------------------------------
SECCION SERVICIOS
--------------------------------*/

.servicios article {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1rem 0; }


/*---------------------------------------------
EMPIEZAN LAS MEDIAS QUERIES
--------------------------------------------*/
  /*Con este comando cambia el formato del texto con respecto a la 
  imagen, si se quita entonces hay: imagen, título, texto,... en el mismo reglón ("9 colunmas")
  Si se deja entonces cada grupo está en una columna ("3 colunmas")*/
  .servicios article {
    margin: 1rem 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center; }

/* Con estos comandos giran las imágenes */
  .servicios img
  {
    flex: 0 0 90px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 90px;
    -ms-flex: 0 0 90px;
    /*flex: 0 0 160px;*/
    overflow: hidden;
    margin-right: 0;
    margin-bottom: 1rem;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
  }


  .servicios article:hover img {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; }/*-------------------------------
SECCION SERVICIOS
--------------------------------*/

.servicios article {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1rem 0; }


/* Imágenes que giran */
.servicios article {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1rem 0; }


/* Medias queries */
  /*Con este comando cambia el formato del texto con respecto a la 
  imagen, si se quita entonces hay: imagen, título, texto,... en el mismo reglón ("9 colunmas")
  Si se deja entonces cada grupo está en una columna ("3 colunmas")*/
  .servicios article {
    margin: 1rem 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center; }

.servicios a 
{
  font-weight:bolder;
  color: #FFFFFF;/*color: blanco*/
  font-weight:bold;
}