1463 lines
24 KiB
CSS
1463 lines
24 KiB
CSS
|
|
|
|
/*---------------------GRID HEADER PAGINAS--------------------*/
|
|
|
|
|
|
|
|
.grid-cabeza-container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"header header"
|
|
"nav nav";
|
|
}
|
|
|
|
|
|
|
|
.grid-cabeza-logo {
|
|
text-align: center;
|
|
grid-area: header;
|
|
|
|
|
|
}
|
|
|
|
.barraInicio {
|
|
grid-area: nav;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: linear-gradient(45deg, #138522, gold, black);
|
|
position: relative;
|
|
animation: cambiar 10s ease-in infinite;
|
|
background-size: 200% 200%;
|
|
|
|
}
|
|
|
|
.itemBarra {
|
|
list-style: none;
|
|
color: white;
|
|
width: 100%;
|
|
height: 25px;
|
|
padding-top: 6px;
|
|
text-align: center;
|
|
border: 2px solid white;
|
|
|
|
|
|
|
|
}
|
|
|
|
@keyframes cambiar{
|
|
0%{background-position: 0 50%;}
|
|
50%{background-position: 100% 50%;}
|
|
100%{background-position: 0 50%;}
|
|
|
|
}
|
|
|
|
.enlacePaginas {
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
/*----------------------------Carrito Compra---------------------------*/
|
|
|
|
.cestaCompra {
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: fixed;
|
|
cursor: pointer;
|
|
right: 5px;
|
|
bottom: 100px;
|
|
z-index: 98;
|
|
|
|
}
|
|
|
|
.img-carrito img{
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
}
|
|
.desplegable-carrito {
|
|
display: none;
|
|
opacity: 0;
|
|
padding: 10px;
|
|
}
|
|
|
|
.img-carrito:hover ~ .desplegable-carrito{
|
|
display:block;
|
|
opacity: 1;
|
|
z-index: 98;
|
|
|
|
}
|
|
|
|
.cestaCompra:hover > .desplegable-carrito{
|
|
display:block;
|
|
opacity: 1;
|
|
z-index: 98;
|
|
background-color: white;
|
|
}
|
|
.cestaCompra:hover > .img-carrito{
|
|
opacity: 0;
|
|
}
|
|
|
|
.articulo-carrito {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.articulo-carrito p{
|
|
margin: 0 5px;
|
|
padding-top: 5px;
|
|
align-self: center;
|
|
}
|
|
|
|
|
|
|
|
.listaCarrito {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.infoArticulo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 5px;
|
|
}
|
|
/*----------------------------Boton Arriba------------------*/
|
|
|
|
.btn-up {
|
|
width: 35px;
|
|
height: 35px;
|
|
outline: 0;
|
|
border-radius: 50%;
|
|
border: 1px solid #138522;
|
|
background-color: #138522;
|
|
position: fixed;
|
|
cursor: pointer;
|
|
right: 40px;
|
|
bottom: 50px;
|
|
transition: all 1s ease-in-out;
|
|
color: white;
|
|
opacity: .5;
|
|
|
|
}
|
|
|
|
|
|
.btn-up:hover{
|
|
opacity: 1;
|
|
}
|
|
|
|
/*------------------------------CUERPO----------------------------------*/
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
|
/*----------------------CABECERA INTRO PAGINAS---------------*/
|
|
|
|
|
|
|
|
|
|
.titulo-inicio{
|
|
text-align: center;
|
|
background-image: url(../RECURSOS/Logo/fuego2.jpg);
|
|
background-size: cover;
|
|
box-shadow: 2px 2px 5px grey;
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
/*----------------------INICIO------------------------*/
|
|
|
|
.art-inicio {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
}
|
|
|
|
.cuerpo-inicio{
|
|
|
|
padding: 50px;
|
|
}
|
|
.img-inicio {
|
|
padding: 20px;
|
|
}
|
|
/*----------------------GALLETAS------------------------*/
|
|
|
|
.aviso-galletas{
|
|
display: none;
|
|
background: #fff;
|
|
padding: 20px;
|
|
width: cal(100% - 40px);
|
|
max-width: 300px;
|
|
border-radius: 10px;
|
|
border:1px solid #07360d;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
z-index: 100;
|
|
padding-top: 40px;
|
|
box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
|
|
text-align: center;
|
|
}
|
|
|
|
.aviso-galletas.active {
|
|
display: block;
|
|
}
|
|
.img-galleta{
|
|
max-width: 100px;
|
|
position: absolute;
|
|
top: -50px;
|
|
left: calc(50% - 50px);
|
|
}
|
|
|
|
.aviso-galletas .titulo-galletas {
|
|
margin-bottom: 15px;
|
|
color: #0c5416;
|
|
}
|
|
|
|
.aviso-galletas .parrafo-galletas{
|
|
margin-bottom: 10px;
|
|
|
|
|
|
}
|
|
.aviso-galletas .boton-galletas{
|
|
width: 100%;
|
|
background-color: #106c1c;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: .3s ease all;
|
|
border-radius: 5px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.aviso-galletas .boton-galletas:hover{
|
|
|
|
background-color: #07360d;
|
|
|
|
}
|
|
.enlace-galletas{
|
|
color: #138522;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.enlace-galletas:hover{
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
.fondo-aviso-galletas{
|
|
display: none;
|
|
background: rgba(0, 0, 0, .20);
|
|
position: fixed;
|
|
z-index: 99;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.fondo-aviso-galletas.active{
|
|
display: block ;
|
|
}
|
|
|
|
.lista-galletas {
|
|
list-style: none;
|
|
}
|
|
|
|
/*----------------------PRODUCTOS------------------------*/
|
|
|
|
|
|
.cuerpo-prod{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.art-inicio-productos{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.contenedor-productos {
|
|
width: 100%;
|
|
}
|
|
|
|
.lista-productos {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.item-lista-productos {
|
|
display: flex;
|
|
flex-direction: column;
|
|
list-style: none;
|
|
width: 500px;
|
|
border: 2px solid grey;
|
|
margin: 20px 40px;
|
|
border-radius: 20px;
|
|
box-shadow: 5px 5px 5px 1px lightslategray;
|
|
}
|
|
|
|
.item-lista-productos .container-carousel {
|
|
margin: 0;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
|
|
}
|
|
.carruseles-prod {
|
|
width: 300%; /*modificar en caso de meter mas slides*/
|
|
height: 100%;
|
|
display: flex;
|
|
user-select: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
|
|
}
|
|
|
|
.slider-section-prod {
|
|
width: calc(100% / 3); /*modificar en caso de meter mas slides*/
|
|
padding: 20px;
|
|
margin: 0;
|
|
|
|
|
|
}
|
|
|
|
.slider-section-prod img{
|
|
min-height: 180px;
|
|
}
|
|
|
|
|
|
.info-producto{
|
|
display: flex;
|
|
display: row;
|
|
list-style: none;
|
|
border-width: 1px 0px 0px 0px;
|
|
border-color: grey;
|
|
border-style: solid;
|
|
height: auto;
|
|
margin: 0;
|
|
padding-inline-start: 0px;
|
|
|
|
}
|
|
|
|
.descripcion-producto {
|
|
text-align: start;
|
|
padding: 0px 20px;
|
|
}
|
|
|
|
.precio-producto {
|
|
text-align: center;
|
|
padding: 45px;
|
|
border-width: 0px 0px 0px 0px;
|
|
border-color: grey;
|
|
border-style: solid;
|
|
margin: 0;
|
|
font-weight: bold;
|
|
align-self: center;
|
|
}
|
|
|
|
.productos-disponibles {
|
|
color: #576c57;
|
|
}
|
|
|
|
.contenedor-boton-añadir {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.añadirProd {
|
|
margin: 10px;
|
|
border-radius: 25%;
|
|
width: 80px;
|
|
height: 60px;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item-lista-productos .container-carousel .btn-left,
|
|
.item-lista-productos .container-carousel .btn-right {
|
|
display: flex;
|
|
position: absolute;
|
|
font-size: 40px;
|
|
top: 50%;
|
|
background-color: transparent;
|
|
border-radius: 50%;
|
|
border-color: transparent;
|
|
padding: 5px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
color: #576c57;
|
|
transform: translate(0, -50%);
|
|
transition: .5s ease;
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
.item-lista-productos .container-carousel .btn-left {
|
|
left: 30px;
|
|
}
|
|
|
|
.item-lista-productos .container-carousel .btn-right {
|
|
right: 30px;
|
|
}
|
|
|
|
.item-lista-productos .container-carousel .btn-left:hover,
|
|
.item-lista-productos .container-carousel .btn-right:hover {
|
|
background-color: lightgrey;
|
|
color: black;
|
|
}
|
|
|
|
|
|
|
|
/*---------------------------SERVICIOS---------------------*/
|
|
|
|
/*---------------KARRUSEL----------------*/
|
|
|
|
.karro-section {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.karrusel {
|
|
width: 100%;
|
|
background-color: white;
|
|
}
|
|
|
|
.karrusel h2 {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.karrusel .karro-grande {
|
|
width: 300%;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
transition: all .5s ease;
|
|
transform: translateX(0%);
|
|
|
|
}
|
|
.karrusel .img-karro {
|
|
width: calc(100% / 3); /*modificar en caso de meter más slides*/
|
|
height: 450px;
|
|
margin-left: 50px;
|
|
display: flex;
|
|
flex-direction: row nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.karrusel .img-karro h2{
|
|
margin: 0;
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #138522;
|
|
|
|
}
|
|
.karrusel .img-karro .articulo-karro{
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 80px;
|
|
padding: 60px;
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
.karrusel .img-karro img{
|
|
max-height: 350px;
|
|
|
|
}
|
|
.karrusel .img-karro article {
|
|
padding: 60px;
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
.karrusel .puntos-karro {
|
|
width: 100%;
|
|
height: 30px;
|
|
margin: 0;
|
|
padding: 1em;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
list-style: none;
|
|
}
|
|
|
|
.karrusel .punto-karro {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: gold;
|
|
margin: 1em;
|
|
border-radius: 25px;
|
|
border: 1px solid gray;
|
|
box-shadow: 1px 1px #0c5416;
|
|
text-align: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: larger;
|
|
|
|
|
|
}
|
|
|
|
.karrusel .punto-karro:hover{
|
|
background-color: rgb(239, 210, 44);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.karrusel .punto-karro.activo {
|
|
background-color: goldenrod;
|
|
cursor: auto;
|
|
color: white;
|
|
}
|
|
|
|
.container-carousel {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
margin-left: 30px;
|
|
|
|
}
|
|
|
|
.carruseles-servicios {
|
|
width: 300%; /*modificar en caso de meter mas slides*/
|
|
height: 100%;
|
|
display: flex;
|
|
user-select: none;
|
|
|
|
|
|
|
|
}
|
|
.slider-section {
|
|
height: 100%;
|
|
width: calc(100% / 3); /*modificar en caso de meter mas slides*/
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
.container-carousel .btn-left,
|
|
.container-carousel .btn-right {
|
|
position: absolute;
|
|
font-size: 35px;
|
|
top: 50%;
|
|
background-color: transparent;
|
|
border-radius: 50%;
|
|
border-color: transparent;
|
|
padding: 5px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
color: gold;
|
|
transform: translate(0, -50%);
|
|
transition: .5s ease;
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
.container-carousel .btn-left {
|
|
left: 10px;
|
|
}
|
|
|
|
.container-carousel .btn-right {
|
|
right: 10px;
|
|
}
|
|
|
|
.container-carousel .btn-left:hover,
|
|
.container-carousel .btn-right:hover {
|
|
color: darkgoldenrod;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*--------------------------EVENTOS------------------------------*/
|
|
|
|
|
|
.art-inicio-eventos {
|
|
text-align: center;
|
|
}
|
|
.contenedor-eventos{
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 50px;
|
|
}
|
|
|
|
.section-eventos{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
/*------------------MAPA-------------------*/
|
|
.contenedor-mapa{
|
|
width: 100%;
|
|
margin-top: 50px;
|
|
text-align: center;
|
|
padding-left: 80px;
|
|
|
|
}
|
|
|
|
.jaula-mapa {
|
|
|
|
width:300px;
|
|
height:300px;
|
|
}
|
|
|
|
/*-----------------------------------*/
|
|
|
|
.item-lista-eventos {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 3fr;
|
|
grid-template-areas:
|
|
"img fecha titulo"
|
|
"img texto texto";
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.token-evento {
|
|
grid-area: img;
|
|
align-self: center;
|
|
}
|
|
|
|
.titulo-evento {
|
|
grid-area: titulo;
|
|
color: #07360d;
|
|
}
|
|
|
|
.texto-evento {
|
|
grid-area: texto;
|
|
margin: 20px;
|
|
|
|
}
|
|
.fecha-evento {
|
|
grid-area: fecha;
|
|
margin: 20px;
|
|
align-self: center;
|
|
font-size: x-large;
|
|
font-weight: bold;
|
|
color: #138522;
|
|
}
|
|
|
|
|
|
/*---------CALENDARIO EVENTOS--------*/
|
|
.calendario {
|
|
width: auto;
|
|
margin: 30px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.info-calendario {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 30px;
|
|
font-size: 1.4em;
|
|
text-transform: capitalize;
|
|
|
|
}
|
|
|
|
.btn-izq-calendar,
|
|
.btn-der-calendar {
|
|
color: gold;
|
|
cursor: pointer;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
|
|
.btn-izq-calendar {
|
|
margin-right: auto;
|
|
}
|
|
.btn-der-calendar {
|
|
margin-left: auto ;
|
|
}
|
|
|
|
.mes-calendario,
|
|
.year-calendario {
|
|
padding: 50px 15px;
|
|
}
|
|
|
|
.semana-calendario, .fechas-calendario {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
grid-gap: 10px;
|
|
}
|
|
|
|
.item-calendario {
|
|
text-align: center;
|
|
line-height: 2;
|
|
|
|
}
|
|
|
|
|
|
.today {
|
|
background-color: lightcoral;
|
|
color: white;
|
|
width: 50%;
|
|
border-radius: 50%;
|
|
margin: auto;
|
|
}
|
|
.today:hover{
|
|
background-color: coral;
|
|
}
|
|
|
|
.dia-evento {
|
|
background-color: gold;
|
|
color: white;
|
|
width: 50%;
|
|
border-radius: 50%;
|
|
margin: auto;
|
|
}
|
|
|
|
.dias-ultimo-mes {
|
|
opacity: .4;
|
|
}
|
|
.desplegable-calendario{
|
|
display: none;
|
|
opacity: 0;
|
|
padding: 10px;
|
|
background-color: rgb(171, 149, 25);
|
|
border-radius: 20px;
|
|
|
|
|
|
}
|
|
|
|
.desplegable-calendario li {
|
|
margin: 0;
|
|
padding: 0;
|
|
float: none;
|
|
list-style: none;
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dropdown:hover > ul {
|
|
display:block;
|
|
opacity: 1;
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
.dropdown:hover {
|
|
background-color: darkgoldenrod;
|
|
}
|
|
|
|
|
|
.formateo-evento-calend{
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
/*------------------------------CONTACTO------------------------*/
|
|
|
|
.formulario-contacto input[type="email"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
border: 1px solid gold;
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: 90%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.formulario-contacto input:invalid {
|
|
border-color: red;
|
|
background-color: rgba(19, 133, 34, 0.5);
|
|
|
|
}
|
|
|
|
.formulario-contacto input:focus:invalid {
|
|
outline: none;
|
|
}
|
|
|
|
.formulario-contacto .error {
|
|
width: 100%;
|
|
padding: 0;
|
|
font-size: 80%;
|
|
color: white;
|
|
background-color: #900;
|
|
border-radius: 0 0 5px 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.formulario-contacto .error.active {
|
|
padding: 3px;
|
|
display: block;
|
|
text-align: center;
|
|
position: absolute;
|
|
width: fit-content;
|
|
}
|
|
|
|
.cuerpo-contacto {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.articulo-contacto{
|
|
width: 800px;
|
|
text-align: center;
|
|
}
|
|
.formulario-contacto {
|
|
background: linear-gradient(
|
|
30deg,
|
|
rgba(19, 133, 34, 0.8) 30%,
|
|
rgba(40, 42, 55, 0.8)
|
|
),
|
|
url(../RECURSOS/Contacto/Horno.jpg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
padding: 50px;
|
|
width: 800px;
|
|
border-radius: 25px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-shadow: 2px 2px 5px grey;
|
|
|
|
}
|
|
.formulario-contacto h2 {
|
|
color: gold;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
.formulario-contacto form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 50%;
|
|
|
|
}
|
|
|
|
.formulario-contacto label {
|
|
font-size: 15px;
|
|
color: gold;
|
|
font-weight: 700;
|
|
padding: 10px;
|
|
|
|
}
|
|
.formulario-contacto input,
|
|
.formulario-contacto textarea,
|
|
button.boton-enviar-form {
|
|
padding: 15px 15px;
|
|
background-color: rgba(19, 133, 34, 0.5);
|
|
color: white;
|
|
margin: 10px;
|
|
border-radius: 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.formulario-contacto input:focus,
|
|
.formulario-contacto textarea:focus {
|
|
outline: 1.5px solid gold;
|
|
}
|
|
|
|
.formulario-contacto button.boton-enviar-form {
|
|
background-color: rgba(40, 42, 55, 0.5);
|
|
font-size: 20px;
|
|
color: gold;
|
|
width: 50%;
|
|
align-self: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.formulario-contacto button.boton-enviar-form:hover {
|
|
background-color: rgba(40, 42, 55, 0.9);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*------------------------------POLITICA DE DATOS Y GALLETAS------------------------*/
|
|
|
|
|
|
|
|
.cuerpo-politica-datos {
|
|
margin: 0 80px 0 80px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ultima-actualizacion {
|
|
text-align: center;
|
|
}
|
|
|
|
.intro-polpriv {
|
|
margin: 0px 10px;
|
|
}
|
|
|
|
.art-inicio-avisos .texto-inicio-avisos{
|
|
margin: 60px;
|
|
}
|
|
.cuerpo-avisos-legales{
|
|
margin: 60px;
|
|
}
|
|
|
|
.texto-intro-galletas{
|
|
margin: 0px 30px;
|
|
}
|
|
|
|
.cuerpo-galletas {
|
|
margin: 0px 30px;
|
|
}
|
|
|
|
|
|
/*-----------------------FORMATEO FOOTER-----------------------*/
|
|
|
|
|
|
.pie-forja {
|
|
margin: 0;
|
|
width: 100%;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.contenedor-listas-pie {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
background: linear-gradient(45deg, #138522, gold, black);
|
|
animation: cambiar 10s ease-in infinite;
|
|
background-size: 200% 200%;
|
|
|
|
}
|
|
|
|
.lista-pie-forja {
|
|
display: flex;
|
|
flex-direction: column;
|
|
list-style: none;
|
|
color: white;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 10px 0px 25px 0px;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.cabeza-lista-pie {
|
|
padding: 10px 0px;
|
|
font-size: large;
|
|
font-weight: bold
|
|
|
|
}
|
|
|
|
.item-lista-pie {
|
|
padding: 5px 0px;
|
|
|
|
}
|
|
.item-lista-pie a{
|
|
text-decoration: none;
|
|
color: white;
|
|
|
|
}
|
|
.item-lista-pie a:visited {
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
.item-lista-pie a:hover{
|
|
color: grey;
|
|
}
|
|
|
|
|
|
/*-----------------------FORMATEO TEXTO LIBRE----------------------*/
|
|
|
|
|
|
|
|
.titulos-h2 {
|
|
color: #0c5416;
|
|
}
|
|
|
|
|
|
.titulos-h3 {
|
|
color: #138522;
|
|
}
|
|
|
|
.titulos-h4 {
|
|
color: #28c23c;
|
|
}
|
|
.dia-finde {
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
.item-lista-productos h3 {
|
|
color: #0c5416;
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (min-width:300px) and (max-width:600px){
|
|
|
|
|
|
|
|
.grid-cabeza-container {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.grid-cabeza-logo {
|
|
max-width: 350px;
|
|
|
|
}
|
|
|
|
.barraInicio {
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
.itemBarra {
|
|
|
|
width: 100%;
|
|
height: 25px;
|
|
padding-top: 6px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.btn-up{
|
|
opacity: 1;
|
|
right: 17px;
|
|
bottom: 40px;
|
|
}
|
|
|
|
.titulo-inicio{
|
|
width: 100%;
|
|
}
|
|
|
|
.img-inicio img{
|
|
width: 280px;
|
|
}
|
|
|
|
.img-inicio{
|
|
width: 350px;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
.cuerpo-inicio{
|
|
padding: 20px;
|
|
}
|
|
.cuerpo-inicio h3{
|
|
text-align: center;
|
|
}
|
|
.cuerpo-inicio p{
|
|
padding: 10px;
|
|
}
|
|
|
|
.art-inicio{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
.cestaCompra {
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: fixed;
|
|
cursor: pointer;
|
|
right: 5px;
|
|
bottom: 100px;
|
|
z-index: 999;
|
|
|
|
}
|
|
|
|
.img-carrito img{
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
}
|
|
.desplegable-carrito {
|
|
display: none;
|
|
opacity: 0;
|
|
padding: 10px;
|
|
}
|
|
|
|
.img-carrito:hover ~ .desplegable-carrito{
|
|
display:block;
|
|
opacity: 1;
|
|
z-index: 999;
|
|
|
|
}
|
|
|
|
.cestaCompra:hover > .desplegable-carrito{
|
|
display:block;
|
|
opacity: 1;
|
|
z-index: 999;
|
|
background-color: white;
|
|
}
|
|
.cestaCompra:hover > .img-carrito{
|
|
opacity: 0;
|
|
}
|
|
|
|
.articulo-carrito {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.articulo-carrito p{
|
|
margin: 0 5px;
|
|
padding-top: 5px;
|
|
align-self: center;
|
|
}
|
|
|
|
|
|
|
|
.listaCarrito {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.infoArticulo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 5px;
|
|
}
|
|
|
|
/*-----------------PRODUCTOS MOVIL-----------------*/
|
|
|
|
.art-inicio-productos{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.contenedor-productos{
|
|
margin-bottom: 30px;
|
|
}
|
|
.container-carousel{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.item-lista-productos {
|
|
|
|
width: 280px;
|
|
margin: 10px 0px;
|
|
padding: 0;
|
|
}
|
|
.carruseles-prod{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.kuerpo-prod{
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.info-producto{
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
}
|
|
.descripcion-producto{
|
|
display: flex;
|
|
flex-direction: row;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
.slider-section-prod {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.slider-section-prod img {
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 80%;
|
|
height: 80%;
|
|
}
|
|
.item-lista-productos h3{
|
|
font-size: large;
|
|
padding: 0px 20px;
|
|
}
|
|
.info-producto{
|
|
justify-content: end;
|
|
}
|
|
.precio-producto{
|
|
padding: 15px 30px;
|
|
align-self: center;
|
|
}
|
|
|
|
|
|
.item-lista-productos .container-carousel .btn-left {
|
|
left: 10px;
|
|
}
|
|
|
|
.item-lista-productos .container-carousel .btn-right {
|
|
right: 10px;
|
|
}
|
|
|
|
/*-----------------SERVICIOS MOVIL-----------------*/
|
|
|
|
|
|
.karro-section{
|
|
width: 100%;
|
|
background-color: white;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
.karrusel .img-karro {
|
|
width: 100%;
|
|
}
|
|
.karrusel .titulos-h2{
|
|
margin: 5px 20px;
|
|
padding: 0;
|
|
}
|
|
|
|
.karrusel{
|
|
margin: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
.karro-section .karrusel .karro-grande {
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-column: 1;
|
|
translate: none;
|
|
flex-direction: none;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.karrusel .img-karro {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: white;
|
|
margin: 0px;
|
|
|
|
|
|
}
|
|
.karrusel .img-karro img{
|
|
width: 100%;
|
|
margin: 0px;
|
|
}
|
|
|
|
|
|
.karrusel .img-karro article{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.container-carousel {
|
|
|
|
box-sizing: border-box;
|
|
width: 90%;
|
|
height: auto;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.carruseles-servicios {
|
|
align-items: center;
|
|
}
|
|
.karrusel .puntos-karro{
|
|
display: none;
|
|
}
|
|
|
|
.container-carousel .btn-left {
|
|
left: -2px;
|
|
}
|
|
|
|
.container-carousel .btn-right {
|
|
right: -2px;
|
|
}
|
|
|
|
/*-----------------EVENTOS MOVIL-----------------*/
|
|
|
|
.section-eventos{
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
height: auto;
|
|
margin-bottom: 60px;
|
|
|
|
}
|
|
.contenedor-eventos{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin: 10px;
|
|
}
|
|
.contenedor-mapa{
|
|
width: 180px;
|
|
height: 180px;
|
|
margin: 30px;
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
.jaula-mapa {
|
|
|
|
width:180px;
|
|
height:180px;
|
|
}
|
|
|
|
.lista-eventos{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
.item-lista-eventos {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0;
|
|
}
|
|
|
|
.texto-evento {
|
|
margin: 0px;
|
|
padding: 10px;
|
|
|
|
}
|
|
.titulo-evento{
|
|
margin: 0px;
|
|
font-size: large;
|
|
}
|
|
.fecha-evento {
|
|
margin: 5px;
|
|
font-size: large;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.calendario {
|
|
width: 240px;
|
|
margin: 5px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.mes-calendario,
|
|
.year-calendario {
|
|
padding: 5px 2px;
|
|
}
|
|
|
|
.semana-calendario, .fechas-calendario {
|
|
grid-gap: 2px;
|
|
}
|
|
|
|
.dia-calendario.item-calendario {
|
|
font-size: xx-small;
|
|
}
|
|
|
|
.info-calendario {
|
|
text-align: center;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.btn-izq-calendar {
|
|
margin-right: 10px;
|
|
}
|
|
.btn-der-calendar {
|
|
margin-left: 10px ;
|
|
}
|
|
|
|
/*----------------CONTACTOS MOVIL------------*/
|
|
|
|
|
|
|
|
.articulo-contacto{
|
|
width: 100%;
|
|
}
|
|
.formulario-contacto {
|
|
width: auto;
|
|
margin: 30px;
|
|
|
|
}
|
|
|
|
.formulario-contacto h2 {
|
|
color: gold;
|
|
font-size: 20px;
|
|
|
|
|
|
|
|
}
|
|
.formulario-contacto form {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
/*----------------FOOTER MOVIL------------*/
|
|
|
|
|
|
|
|
.pie-forja {
|
|
margin: 0;
|
|
width: 100%;
|
|
|
|
}
|
|
.contenedor-listas-pie{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|