/*---------------------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: 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; } /*----------------------------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:480px){ .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; } /*-----------------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; } }