@charset "UTF-8"; * { margin: 0; padding: 0; list-style: none; text-decoration: none; border: none; outline: none; } /*Para dar efecto al scroll*/ html{ scroll-behavior: smooth; } /***************************/ body { background-image: url("../imagenes/fondo_plano.jpg"); background-repeat: no-repeat; background-size: cover; font-family: Arial, Helvetica, sans-serif; } #cabecera { position: sticky; top: 0; background-color: white; padding: 0.5em; display: flex; align-items: end; justify-content: space-between; box-shadow: 0px 4px 5px 0px; } #cabecera img { width: 60px; height: 60px; } main { padding: 1em; } /* Para que el nav no oculte los elementos donde esta el ancla */ /* en versiones modernas mejor utilizar scroll-margin-top: 80px; */ #servicios, #productos, #contacto { /* padding-top: 100px; margin-top: -20px; */ scroll-margin-top: 60px; } /*******************************************/ .menu { padding-left: 1em; } .boton_menu { margin: 0.2em; color: #1a89dc; font-size: 40px; } .boton_menu:hover { color: red; } hr { width: 100%; background-color: #1a89dc; height: 2px; margin-left: 0px; } h2, h3, p { padding: 1em; } h2 { color: #1a89dc; } /* Bloque definicion de las clases de tabla flex */ .table_flex{ width: 80%; max-width: 1024px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-around; } .table_flex_item, .table_flex_item_b{ flex-direction: column; margin-bottom: 1em; } .table_flex_item p { padding: 0; text-align: center; color: #1a89dc; font-weight: bold; } .table_flex_item img { max-width: 300px; justify-content: center; } .table_flex_item_b img { max-width: 230px; justify-content: center; } .table_flex_item_b p { padding: 0; text-align: center; color: #1a89dc; font-weight: bold; } /*****************************************/ dl { font-weight: bold; font-size: larger; padding: 1em; } dl dt { color: #1a89dc; } ul { color: #1a89dc; width: 300px; margin: auto; font-weight: bold; } li { list-style-type: circle; } span { color: #1a89dc; width: 300px; } iframe { width: 100%; border: 2px solid #1a89dc; box-sizing: border-box; } /* Definiciones para el boton de subir pagina*/ #subircaja { position: fixed; right: 10px; bottom: 10px; } #subirimg { width: 64px; height: 64px; } /*********************************************/ .lista_menu { /* display: inline; */ width: 100%; } .lista_menu li { list-style-type: none; float: left; } /*Media Querys para aplicar a dispositivos moviles*/ @media (max-width: 550px) { .lista_menu li { list-style-type: square; text-align: left; clear: left; } .boton_menu { font-size: 1em; } #servicios, #productos, #contacto { scroll-margin-top: 80px; } .contacto_info{ display: flex; flex-direction: column; } }