main{
    position: relative;
    margin-top: 100px;
    border-top: 3px solid lightblue;
    background-color: darkred;
    color: white;  
    z-index: 1;
}

.fondo_negro{
    background-color: darkslategray;

}

a {/*CAMBIAR COLOR A LOS LINKS*/
    color: white; 
}

.fondo_portada{
    background-image: url(../img/fondo_portada.jpg);
    background-size: 100%;
    background-position: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.caja_portada{
    display: none;
}

.caja_portada h2{
    background: none; 
    width: 100%;
}

.portada{
    height: 200px;
    width: 200px;
    border-radius: 1000px;
    border: 5px solid white;
    margin: auto;
    background-size: 100% 100%;
    animation: portada 10s infinite;
}

form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    width: 100%;
}


main form input, textarea{
    margin: 5px;
    height: 30px;
    width: 200px;
    border-radius: 10px;
    background-color: rgba(40,0,0,70%);
    color: orangered;
    text-align: center;
    font-weight: bold;
    border: 1px solid red;
}



form option{
    background-color: white;
}

.boton{
    background-color: darkred;
    padding: 5px;
    color: white;
    border-radius: 10px;

}

form a{
    width: 200px;
    padding-left:  10px;
    padding-right: 10px;
    color: orange;
    background-color: black;
    text-align: center;
}

form label{
    color: white;
}

.caja {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.imagenes_categorias{
    border-radius: 10px;
    background-color: black;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin: 10px;
    border: 5px solid orange;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.imagenes_categorias .img_productos{
    width: 250px;
}

main h2{
    background-color: darkred;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 12px;
}

.productos {
    position: relative;
    top: 30px;
    left: 0;
    right: 0;
}


/* CONTACTO.html --///////////////////////////////////////////*/
.contacto{
    top: 155px;
}

.contacto input {
    width: 500px;
}

.formulario_contacto_mensaje{
    height: 200px;
    width: 500px;
}

/*FIN CONTACTO.html/////////////////////////////////////////*/


/* PRODUCTOS ///////////////////////////////////////////////*/


.usuario_sesion {
    color: white;
    background-color: orangered;
    width: 100%;
    height: 30px;
    font-size: 15px;  
    padding: 20px;
}

.boton_cerrar_sesion{
    background-color: black;
    width: 100%;
    position: absolute;
    top: 20px;
}

.imagenes_categorias form{
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: white;
}

.imagenes_categorias h1{
    font-size: 18px;
    background-color: orangered;
    width: 100%;
    text-align: center;
    color: white;
}

.imagenes_categorias h2{
    background-color: darkred;
    width: 100%;
    text-align: center;
    color: white;
}


/*FIN PRODUCTOS*/



/*INICIO CARRITO*/

.formulario_cantidad {
    color: black;
}

.informacion_descuento img{
    height: 200px;
}
.informacion_descuento {
    background-color: darkgoldenrod;
}

.lista_pedido {
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    
}

.lista_pedido form {
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 0px;
    
}

.formulario_panel form {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 0px; 
}

.lista_pedido .boton_eliminar {
    border-radius: 0px;
    background-color: darkred;
    color: white;
    width: 100%;
}

.boton_verPedido {
        background-color: orangered;
        color: white;

}

.boton_volver_varias_imagenes{
    background-color: orangered;
    color: white;
    position:inherit;

    
}

.foto_boton input{
    width: 200px;
    height: 200px;
    border: 5px solid orange;
}


.lista_pedido h1 {
    text-align: center;
    color: black;
    font-size: 12px;
    padding-left: 20px;
    flex-grow: 1;
}

.total_a_pagar {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 20px;
    padding: 20px;
    flex-grow: 1;
}

.texto_descuento {
    width: 100%;
    text-align: center;
    color: yellow;
    font-size: 20px;
    padding: 20px;
    flex-grow: 1;
}


.lista_pedido img {
    height: 100px;
    width: 100px;
    border-bottom-right-radius:10px; 
}

.formulario_confirmar { 
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
}


/*FIN CARRITO*/







@keyframes portada{
    0%, 30%{
        background-image: url(../img/autos/1.jpeg);
        opacity:1;
    }
    35%, 65%{
        background-image: url(../img/autos/2.jpg);
    }
    70%, 100%{
        background-image: url(../img/autos/3.jpg);
    }
}


@media (min-width: 768px){
    .portada {
        background-size: 100%;
    }

}

@media (min-width: 1024px){
    form {
        position: absolute;
        top: 190px;
        left: 700px;
        width: auto;
        height: auto;
        
    }
    

    main form input, textarea{
        margin: 5px;
        height: 30px;
        width: 200px;
        border-radius: 10px;
        background-color: rgba(40,0,0,70%);
        color: white;
        text-align: center;
        font-weight: bold;
        border: 1px solid red;
    }
    
    
    .formulario_panel form {
        position: absolute;
        top: 0px;
        left: 0px;
        width: auto;
        height: auto;
        
    }
    
    .fondo_portada{
        height: 500px;
        width: 100%;
        flex-direction: row;
        

    }
    
    .caja_portada{
        position: absolute;
        
        left: 150px;
        display: flex;
        flex-wrap: wrap;
        border: 5px solid rgba(0,0,0,50%);
        align-items: center;
        width: 350px;
        background-color: rgba(0,0,0,80%);
        margin: 50px;
        padding: 50px;
        border-radius: 20px;

    }
    .portada{
        position: absolute;
        background-size: 100%;
        background-position:center;
        z-index: 101;
        
        left: 0px;
    }
    
    .imagenes_categorias{
        position: relative;
        top: 30px;
    }
    
    .contenedor{
        width: 1000px; /*para que TODOS LOS CONTENEDORES no quede pegado a la parte izquierda al agrandar el navegador*/
    }
    
    /*CARRITO*/
    .formulario_cantidad {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        
    }
    
    .formulario_cantidad input{
        color: black;
        background-color: white;
        width: 100px;
        border-radius: 0px;
        border: 1px solid black;
    }
    
    .formulario_cantidad .boton_cantidad {
        background-color: darkred;
        color: white;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .lista_pedido h1 {
        width: 30px;
        text-align: center;
        color: black;
        font-size: 12px;
        padding-left: 20px;
        flex-grow: 1;
    }
    
    .lista_pedido .boton_eliminar {
        border-radius: 0px;
        background-color: darkred;
        color: white;
        height: 100px;
        width: 100px;
        border-top-left-radius: 10px;
        border-bottom-left-radius:10px; 
    }
    
    .boton_verPedido {

        position: relative;
        top: -150px;
        left: -120px;
        right: 0px;
    }
    
    .lista_pedido img {
        border-top-right-radius: 10px;
    }
    
    
    /*PRINCIPAL*/
    .productos {
        position: relative;

        left: 0;
        right: 0;
    }
    
    /*MIS DATOS*/
    .formulario_modificar { 
        position: relative;
        top: 0px;;
        bottom: 0px;
        left: -180px;
        right: 0px;    
    }

    /*FIN MIS DATOS*/
    
    
}