/* * * Hoja de estilos para: * Body: todo lo referente a fondos, tipos de letra, margenes de la web y elementos comunes. * Header: logo y menu de navegacion pequeño. * Section main o bloque principal: menu de navegacion grande y slider o informacion. * */ body{ background-image: url("../Imagenes/Fondo/fondo.png"); /*Imagen de fondo*/ background-repeat: repeat; /*Imagen de fondo repetida tanto en x como en y*/ box-sizing: border-box; /*Margenes y pading se añaden al tamaño total para que no se salga de su espacio*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } header{ margin-top: 1.5%; /*Margen superior*/ box-sizing: border-box; /*Margenes y pading se añaden al tamaño total para que no se salga de su espacio*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .main{ margin-top: 4%; /*Margen entre el logo (y menu pequeno) y el slider (y menu grande)*/ box-sizing: border-box; /*Margenes y pading se añaden al tamaño total para que no se salga de su espacio*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } li{ list-style: none; /*Elimina los circulos de ambos menus*/ } li a:link{ text-decoration: none; /*Elimina el subrayado al pasar el raton de ambos menus*/ display: inline; /*Establece a los elementos "a" dentro de los "li" como elementos de linea en ambos menus*/ } a:focus { /*Elimina el borde punteado que aparece cuando se clica en un enlace*/ outline: none !important; -moz-outline-style: none !important; } a:active { /*Elimina el borde punteado que aparece cuando se clica en un enlace*/ outline: none !important; -moz-outline-style: none !important; } /*Declaracion del tipo de letra maven pro black(la mas oscura de las cuatro)*/ @font-face{ font-family: "maven-pro-negra"; src: url("../Fuentes/fuenteWebParrafos/maven-pro-black/MavenProBlack.eot"); src: url("../Fuentes/fuenteWebParrafos/maven-pro-black/MavenProBlack.eot?#amocristalab") format("embedded-opentype"), url("../Fuentes/fuenteWebParrafos/maven-pro-black/MavenProBlack.woff") format("woff"), url("../Fuentes/fuenteWebParrafos/maven-pro-black/MavenProBlack.ttf") format("truetype"), url("../Fuentes/fuenteWebParrafos/maven-pro-black/MavenProBlack.svg#IDdelafuente") format("svg"); } /*Declaracion del tipo de letra maven pro bold(la segunda mas oscura de las cuatro)*/ @font-face{ font-family: "maven-pro-negrita"; src: url("../Fuentes/fuenteWebParrafos/maven-pro-bold/MavenProBold.eot"); src: url("../Fuentes/fuenteWebParrafos/maven-pro-bold/MavenProBold.eot?#amocristalab") format("embedded-opentype"), url("../Fuentes/fuenteWebParrafos/maven-pro-bold/MavenProBold.woff") format("woff"), url("../Fuentes/fuenteWebParrafos/maven-pro-bold/MavenProBold.ttf") format("truetype"), url("../Fuentes/fuenteWebParrafos/maven-pro-bold/MavenProBold.svg#IDdelafuente") format("svg"); } /*Declaracion del tipo de letra maven pro medium(la segunda menos oscura de las cuatro)*/ @font-face{ font-family: "maven-pro-media"; src: url("../Fuentes/fuenteWebParrafos/maven-pro-medium/MavenProMedium.eot"); src: url("../Fuentes/fuenteWebParrafos/maven-pro-medium/MavenProMedium.eot?#amocristalab") format("embedded-opentype"), url("../Fuentes/fuenteWebParrafos/maven-pro-medium/MavenProMedium.woff") format("woff"), url("../Fuentes/fuenteWebParrafos/maven-pro-medium/MavenProMedium.ttf") format("truetype"), url("../Fuentes/fuenteWebParrafos/maven-pro-medium/MavenProMedium.svg#IDdelafuente") format("svg"); } /*Declaracion del tipo de letra maven pro regular(la menos oscura de las cuatro)*/ @font-face{ font-family: "maven-pro-regular"; src: url("../Fuentes/fuenteWebParrafos/maven-pro-regular/MavenProRegular.eot"); src: url("../Fuentes/fuenteWebParrafos/maven-pro-regular/MavenProRegular.eot?#amocristalab") format("embedded-opentype"), url("../Fuentes/fuenteWebParrafos/maven-pro-regular/MavenProRegular.woff") format("woff"), url("../Fuentes/fuenteWebParrafos/maven-pro-regular/MavenProRegular.ttf") format("truetype"), url("../Fuentes/fuenteWebParrafos/maven-pro-regular/MavenProRegular.svg#IDdelafuente") format("svg"); } /*Barra de scroll*/ ::-webkit-scrollbar { width: 8px; /*Ancho scroll*/ background: #EDEDED; /*Color de los limites superior e inferior (donde irian los botones)*/ } /*Estilo de los botones*/ ::-webkit-scrollbar-button { width: 0px; height: 0px; } /*Color del fondo de la barra de scroll*/ ::-webkit-scrollbar-track { background:#EDEDED; /*Color de fondo de la parte fija*/ border:thin solid #EDEDED; /*Color y redondeo de los bordes*/ -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } /*Color de la barra deslizable del scroll*/ ::-webkit-scrollbar-thumb{ background: #888888; -webkit-box-shadow: inset 0 1px 0 rgba(210,210,210,.5), inset 1px 1px 0 rgba(210,210,210,.4), inset 0 1px 1px rgba(210,210,210,.3); border:thin solid #888888; border-radius: 10px; -webkit-border-radius: 10px; } /*Color de la barra deslizable del scroll cuando el raton esta encima*/ ::-webkit-scrollbar-thumb:hover{ background: #777777; } /*Color de la barra deslizable del scroll cuando se clica encima*/ ::-webkit-scrollbar-thumb:active{ background: #777777; } /*Estilo de la esquina (util cuando aparecen las dos barras de scroll (horz. / vert.))*/ ::-webkit-scrollbar-corner { background-color: #EDEDED; } /*Media querie para que el logo no se haga demasiado pequeño (>1200)*/ @media screen and (min-width: 1200px){ .redimension{ max-width: 320px; } } /*Media querie para que el logo no se haga demasiado pequeño (1199 - 992)*/ @media screen and (min-width: 992px) and (max-width: 1199px){ .redimension{ max-width: 290px; } } /*Media querie para que el logo no se haga demasiado pequeño (750 - 0)*/ @media screen and (min-width: 0px) and (max-width: 750px){ .redimension{ min-width: 186.667px; /*Tamaño minimo*/ } } /* * * Menu para dispositivos pequeños * */ .menuDispPequeno { background-image: url("../Imagenes/Fondo/fondoMenuPequeno.png"); /*Imagen de fondo del menu pequeno*/ background-repeat: repeat; /*Imagen de fondo repetida tanto en x como en y*/ width: 200px; /*Ancho maximo*/ height: 100%; /*Ocupe todo el alto*/ position: fixed; /*Posicionamiento fijo para que no se mueva*/ top: 0px; /*Eliminamos el margen superior*/ left: -100%; /*Lo escondemos totalmente a la izquierda (con jquery lo mostramos)*/ z-index: 50; /*Aumentamos la importancia de la capa, para que aparezca encima de todo*/ box-sizing: border-box; /*Margenes y pading se añaden al tamaño total para que no se salga de su espacio*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-y: auto; /*Muestra las barras de scroll automaticamente*/ box-shadow: 4px 0px 5px #555555; /*Sombra para generar profundidad*/ -moz-box-shadow: 4px 0px 5px #555555; -webkit-box-shadow: 4px 0px 5px #555555; } .menu-bar a{ color:#222222; /*Color del icono hamburguer*/ text-decoration: none; /*Quitamos el subrayado del enlace*/ } .menu-bar a:hover{ color:#999; /*Cambiamos el color del icono hamburguer al pasar por encima el raton*/ } .menu-bar a:active{ color:#999; /*Cambiamos el color del icono hamburguer al clicar con el raton*/ } .menu-bar span{ float: right; /*Colocacion del icono hamburguer*/ font-size: 2.5rem; /*Tamano del icono hamburguer*/ } .menu-bar .bt-menu-bar{ display: block; /*Establecemos el elemento de bloque para que ocupe todo su espacio y no se mueva*/ padding-top: 20px; /*Margen interior superior*/ box-sizing: border-box; /*Margenes y pading se añaden al tamaño total para que no se salga de su espacio*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .menu-pequeno{ margin-left: -12%; /*Restamos margen a la parte izquierda*/ padding-left: 22px; /*Aumentamos margen interno a la parte izquierda*/ } .menu-pequeno a li{ display: block; /*Establecemos los elementos de bloque para que ocupen todo su espacio y no se muevan*/ border-width: 0px 0px 1px 0px; /*Borde inferior a modo de separador entre los elementos*/ border-color: rgba(255, 255, 255, 0.2); /*Color y opacidad del borde*/ border-style:solid; /*Solido para que se muestre*/ padding-left: 15px; /*Margen interior para colocar los elementos entre si*/ padding-bottom: 12px; /*Margen interior para colocar los elementos entre si*/ padding-top: 12px; /*Margen interior para colocar los elementos entre si*/ font-family: maven-pro-media; /*Tipo de letra para el menu*/ color: #FFFFFF; /*Color blanco de la letra para el menu pequeno*/ font-size: 15px; /*Tamaño de la fuente*/ } .menu-pequeno a{ text-decoration: none; /*Eliminamos el subrayado de los enlaces del menu pequeño*/ } .menu-pequeno a li:hover{ color: #BE0600; /*Color rojo de la letra para el menu pequeno cuando pasamos por encima el raton*/ } .menu-pequeno a li:active{ color: #BE0600; /*Color rojo de la letra para el menu pequeno cuando pasamos por encima el raton*/ } /*Scroll del menu para disp. pequeños*/ .menuDispPequeno::-webkit-scrollbar { display: none; /*Oculta el scroll para navegadores chrome y safari*/ } .fixed{ overflow: hidden; /*Se emplea para quitar el scroll a la pagina cuando se muestra el menu pequeño*/ } /* * * Menu para dispositivos grandes * */ .menu{ padding: 0; /*Eliminamos los margenes inferiores*/ margin-top: 16%; /*Margen del menu grande con respecto a el logo*/ box-sizing: border-box; /*Margenes y pading se añaden al tamaño total para que no se salga de su espacio*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .menu li{ margin-bottom: 4%; /*Margen inferior entre cada elemento del menu (mas espaciado)*/ } .menu a{ font-family: maven-pro-media; /*Tipo de letra para el menu*/ color: #000000; /*Color negro para el texto los elementos "a" dentro del menu*/ font-size: 16px; /*Tamaño de la fuente*/ } .menu a:hover{ color: #999999; /*Color gris para el texto los elementos "a" dentro del menu cuando paso el raton por encima*/ } .menu a:active{ color: #999999; /*Color gris para el texto los elementos "a" dentro del menu cuando clicamos con el raton*/ } /*Comentado debido a la desaparicion de los submenus*/ /*.menu li ul{ Elementos ul dentro de elementos li de menu display: none; Esconde los submenus } .menu li:hover ul{ display: block; Muestra los submenus al pasar por encima el raton (no compatible jQ menuOrdenador) } .menu li ul li{ margin-left: -9%; Reduce el margen izquierdo del submenu } .menu li ul li:nth-child(1){ Referencia al primer elemento (li) del submenu (ul) margin-top: 2%; Aumenta el margen superior } .menu .reducir{ width: 55px; Reduce el tamano del contenedor de galeria para que solo se despliegue cuando clicas cerca del texto } .menu .aumentar{ width: 165px; Aumenta el tamano del contenedor del submenu para que se muestre con sus proporciones }*/