/* HEADER */
body {
    background-image: url("../Imagenes/FondoX.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #000; /* Letras negras */
}

form {
    width: 100%; /* Ajustado para ocupar el ancho del contenedor */
    max-width: 450px; /* Ancho máximo */
    margin: auto;
    background: rgba(0,0,0,0.4);
    padding: 30px 10px;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 10px;
    font-size: 15px;
}

form p, h2, h3 {
    color: #fff;
    text-align: center;
    margin: 0;
    margin-bottom: 20px;
    font-weight: bold;
}

input, textarea {
    width: 100%; /* Ajustado para ocupar el ancho del contenedor */
    box-sizing: border-box;
    font-size: 17px;
    border: none;
    border-radius: 10px;
    padding: 8px;
}

label {
    margin-right: 10px;
    margin-left: 10px;
    color: white;
    box-sizing: border-box;
    display: inline-block;
    width: 25%; /* Ancho ajustable según tus necesidades */
    text-align: left;
}

hr {
    height: 3px;
    background-color: red;
}

.bg-jl-transparent {
    background-color: rgba(69, 95, 117, 0.5); /* color secundario de Bootstrap con 50% de opacidad */
}

.jumbotron-jl {
    background: rgba(0, 13, 19, 0.2);
    padding: 10px 0;
    font-weight: bold;
    text-align: center;
}

.jumbotron-jl .titulo-blog {
    font-size: 25px;
    color: white;
    font-weight: bold;
    text-align: center;
}

.jumbotron-jl h1 {
    font-weight: bold;   
    font-size: 20px;
    margin-top: -20px;
}

.image-75 {
    height: 75%; /* Imagen ocupará el 75% de la altura del contenedor */
}

/* FOOTER */
footer {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro y transparente */
    color: #fff; /* Color de texto blanco */
    padding: 10px 0; /* Espaciado interno */
}

.footer-section {
    margin-bottom: 5px; /* Espaciado entre secciones */
}

/* SLIDE */ 
nav {
    width: 100%; /* Ajustado para ocupar el ancho del contenedor */
    max-width: 320px; /* Ancho máximo */
    margin: auto;
    background: rgba(0,0,0,0.4);
    padding: 30px 10px;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 10px;
}

li {
    position: relative;
    width: 120px; /* Ancho ajustable según tus necesidades */
}

.listado {
    list-style-type: square;
    position: relative;
    width: 100%;
}

li a {
    display: inline-block;
    padding: 5px 10px;
    width: 120px; /* Ancho ajustable según tus necesidades */
    height: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

li a:hover {
    color: #000;
    background-color: rgba(0,0,0,0.4);
}

.more {
    display: inline-block;
    position: absolute;
    right: 0px;
    font-size: 30px;
}

nav li ul {
    display: none;
    position: absolute;
    top: 0px;
    left: 100px;
}

nav li:hover ul {
    display: block;
}