/* Selector universal "*" */
* {
    /* pegamos a un lateral */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*Fuente*/
    font-family: 'Courier New', Courier, monospace;
    /*Eliminamos el subrallado*/
    text-decoration: none;
}

body {
    background-color: #585c67;
}

article {
    margin-top: 170px;
}



header {
    width: 100%;
    /* Se mantiene arriba de todo, sin el espacio */
    position: fixed;
    top: 0;
    left: 0;
    /* Se mantiene transparente si no se especifica */
    background: #222831;
}

/* Arriba */

.arriba {
    width: 1200px;
    display: flex;
    /* Se centra orizontalmente */
    align-items: center;
    /* Pone el logo a un lado y el buscador del otro */
    justify-content: space-between;
    /*  */
    padding: 10px;
}

.logo img {
    width: 200px;
}

.buscar input {
    width: 300px;
    padding: 10px;
}

/* Menu */

.todo_menu {
    width: 100%;
    height: 50px;
    background-color: #393E46;
    display: flex;
    /* arriba y abajo ; izquierda y derecha */
    /* para que no choque cuando se achique la pag. */
    padding: 0px 20px;
}

.menu {
    max-width: 1700px;
    margin: auto;
    height: 100%;
}

/* Se especifica que solo sea al menu principal, no al desplegable */
nav>ul {
    height: 100%;
    display: flex;
}


nav>ul>li {
    height: 100%;
    list-style: none;
    /* Para que el submenu aparezca donde debe */
    position: relative;

}

nav>ul>li:first-child>a {
    width: 100%;
    background-image: url(../img/home.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 25px 40px;
}

/* Hacemos que no se vaya el icono cuando pasemos el mouse */
nav>ul>li:first-child:hover>a {
    background-image: url(../img/home.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center center;
}

nav>ul>li>a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 14px;
    color: wheat;
    /* Los ponemos en amyoscula */
    text-transform: uppercase;
    font-size: 14px;
    transition: all 300ms ease;
    border-radius: 10%;

}

nav>ul>li>a:hover {
    transform: scale(1.1);
    background: #4b4d50;
    box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);

}

/* Menu desplegable */

nav>ul>li>ul {
    width: 200px;
    list-style: none;
    padding: 14px 0px;
    position: absolute;
    visibility: hidden;
    box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
    background: #393E46;
    /* Lo ponemos encima de todo */
    z-index: auto;
    border-radius: 10px;
    opacity: 0%;
    transition: 1s;
}

nav>ul>li:hover>ul {
    visibility: visible;
    top: 50px;
    opacity: 100%;
}

nav>ul>li>ul>li>a {
    color: wheat;
    padding: 6px;
    display: block;
    margin-left: 14px;
    margin-top: 10px;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 14px;
}


nav>ul>li>ul>li>a:hover {
    color: wheat;
    background: #636568;
    box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
}


/* Inicio */

#inicio-a {
    font-size: 13px;
    margin-top: 134px;
    width: 100%;
    padding: 25px 150px 0px 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    /* va cambiando en relacion a la pantalla, 90vh=90% de la pantalla */
    height: 90vh;
    color: white;
    /* linear-g es una especie de filtro negro*/
    background-image: linear-gradient(0deg,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)), url(../img/inicio-a.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#inicio-b {
    text-align: center;
    /* lo alejamos de arriba y de los costados */
    padding: 100px 250px;
    background-color: white;
    background-size: cover;
    background-image: linear-gradient(0deg,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)), url('../img/f2.jpg');
}

#box {
    width: 70%;
    margin-left: 15%;
    box-sizing: border-box;
    background-color: rgb(210, 210, 210);
    box-shadow: 5px 5px 8px rgb(133, 133, 134);
    padding: 50px;
}

#inicio-c {
    text-align: center;
    /* lo alejamos de arriba y de los costados */
    padding: 100px 250px;
}

button {
    padding: 15px;
    margin: 20px;
    background-color: steelblue;
    color: white;
    font-size: 13px;
    border: 0;
    outline: none;
    cursor: pointer;
    border-radius: 10px;
}

button>a {
    color: wheat;
}

/* Contacto */

#titulo-contacto {
    margin-top: 200px;
    text-align: center;
    justify-content: center;
    font-size: 14px;
}

#contacto {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
}

form {
    display: flex;
    flex-direction: column;
    padding: 38.4px 76.8px;
    width: 90%;
    max-width: 600px;
}

form input,
form textarea,
form select {
    border: 0;
    margin: 10px 0;
    padding: 20px;
    outline: none;
    background: aliceblue;
    font-size: 16px;
}

form>button {
    padding: 15px;
    background-color: tomato;
    color: white;
    font-size: 16px;
    border: 0;
    outline: none;
    cursor: pointer;
    border-radius: 10px;
}

/*le coloco margen para al footer y cambio color de las letras y centro el texto al centro */
footer {
    color: thistle;
    text-align: center;
    margin: 30px;
}

/*Le coloco ancho a las imagenes del footer*/
footer img {
    width: 40px;
}

/*Ajustamos el main de producto y servicio*/
#mps {
    width: 80%;
    margin: 10%;
    text-align: center;
}

/*Modificacon de la tabla */
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    text-align: center
}

#busqueda {
    padding-left: 25%;
}

#busqueda>input {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 4px;
    margin-bottom: -10px;
    background-color: white;
    background-image: url('../img/buscar.png');
    background-position-y: center;
    background-position-x: 10px;
    background-repeat: no-repeat;
    text-align: center;
}



select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}

#datos {
    padding: 25px 25% 0px 25%;
}

/*Modificacion de cada elemento de la tabla  */
td,
th {
    text-align: center;
    align-items: center;
    border: solid;
    text-align: left;
    padding: 10px;
}

/*Ajuste del main de equipo*/
#mq {
    width: 90%;
    margin: 10%;
    text-align: center;
}

/*ajuste del div del main de pagina equipo*/
#mq div {
    display: inline-block;
    width: 40%;
    margin: 4%;
    background-color: rgba(0, 0, 0, 0.2);
}

#mq div p,
h3 {
    margin: 10px;
}

/* Ajustes de historia */

#thistoria {
    width: 40%;
    margin-top: 162px;
    margin-left: 30%;
    text-align: center;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.5);
}

#artih,
.pa {
    width: 70%;
    margin-top: 20px;
    margin-left: 15%;
    padding: 10px;
    text-align: center;
}

.logi>h2 {
    margin-top: 200px;
    text-align: center;
    justify-content: center;
    font-size: 20px;
    width: 100%;
}

.logi {
    margin-top: 200px
}


.logi>form {
    margin-left: 27%;
}

.logi>form>input {
    margin-bottom: 5%;
    margin-top: 5%;
}

.logi>form>a {
    padding: 15px;
    background-color: tomato;
    color: white;
    font-size: 16px;
    border: 0;
    outline: none;
    cursor: pointer;
    border-radius: 10px;
    text-align: center;
    width: 90%;
    margin-left: 5%;
}

li>button {
    background-color: #585c67;
}

#h1 {
    margin-top: 200px;
}