/*
Theme Name:  Okaeri
Version: 1.0.1
Text Domain: okaeri
*/

:root {
	--vertical-menu-width: 200px;
	--no-touch-anchor-padding: 1rem;
	--touch-anchor-padding: 2rem;
}



aside, article, section, header, footer, nav, .menu-mimenu-container {
	display: block;
}
/*
Ya lo hago con <?php wp_nav_menu(array('menu_class' => 'clearfix')) en header.php
.menu-mimenu-container {
	overflow: hidden;
}
*/
div, section, article, h1, h2, h3, p {
	margin: 0;
	padding: 0;
}

html, body, ul, ol {
	margin: 0;
	padding: 0;
}
/* Uso esto junto con -webkit-fill-available (ver .welcome-image) */
html, body, article.home, picture {
	height: 100%;
}


.list-cat li a {
	display: block;
}

@media only screen and (hover: hover) and (pointer: fine) {
	.list-cat li a {
		border: 1px solid transparent;
	}
	.list-cat li a:hover {
		border: 1px solid blue;
	}

	.more-link, #pagedNavigation a {
		border: 1px solid transparent;

	}

	.more-link:hover, #pagedNavigation a:hover {
		border: 1px solid blue;
	}
}

.more-link {
	display: block;
}

#pagedNavigation a {
	display: inline-block;
	width: 40%;
}

.more-link, #pagedNavigation a {
	padding: 1em 0;
}

@media only screen and (hover: none) and (pointer: coarse) {


	.list-cat li a, .more-link, #pagedNavigation a {
		border: 1px solid blue;
		padding: 1em 0;

	}



}


.wp-caption {
    background: none repeat scroll 0 0 #EEEEEE;
    margin-top: 1.625em;
    margin-bottom: 1.625em;
    max-width: 96%;
    padding: 9px;
}

img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"],
img.size-full,
img.size-large {
	width: 100%;
	/*
	Override de height que ahora pone WordPress en el elemento html
        (para que en navegador calcule la relación de aspecto sin
	descargar la imagen) */
	height: auto;
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*
 * http://msdn.microsoft.com/es-es/library/ie/ms530822(v=vs.85).aspx
 * Para que las imágenes escaladas se vean bien en IE7.
 */
img {
	-ms-interpolation-mode: bicubic;
}

figure {
	text-align: left;
}

figure.wp-block-image {
	margin: 0; /* override de los márgenes por defecto de WordPress */
}

.figureRight{
	float: right;
	margin-left: 4%;
	margin-right: 0;
}

/*
figure + figure {
	margin-right: 0;
}
*/

.extra-margin {
	margin: 0 4%;
}

#content h5 {
	float: right;
	margin: 0;
}

html {
	background: rgb(240,240,240);

	font-size: 16px;
	font-family: Cambria, Georgia, "Times New Roman", Times,
	             "游明朝", YuMincho,
	             "ヒラギノ明朝 ProN W3" , "Hiragino Mincho ProN",
	             "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",
	             "HG明朝E",
	             "ＭＳ Ｐ明朝", "MS PMincho",
	             "Noto Serif CJK JP",
	             serif;
}

html:lang(jp) {
	font-size: 18px;
}






body {
	width: 100%;

	/*font: 100% Georgia, "Times New Roman", Times, serif;*/
	/*font-family: "Lucida Sans","Lucida Grande",sans-serif;*/
	/*font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;*/
	
	/*
	* http://forums.realmacsoftware.com/discussion/53574/modification-request-font-family-for-japanese-language
	* Why 2 entries ? Yes, actually メイリオ is Meiryo as is the case of "ヒラギノ　..." and "Hiragino ...". It's because Safari ignores Japanese font name while Firefox only understands Japanese names.
	*/
	
	/*
	* http://dev.l-c-n.com/hiragino/hiragino_F.php
	* Testing the Apple Hiragino font
	
	Dealing with Apple's Hiragino font-family, and various browsers available for OS X. The key is using the correct font-names for the various browsers. Firefox (upto Fx2.0.0.x), IE Mac and Opera will understand the font–family only if the (Japanese) QuickDraw name is used. Safari and Omniweb (and other applications or browsers using the WebCore rendering engine) need the full name of the font, but without the font-weight identifier. This can be found via the FontBook application. To get the text to display as bold, one has to specify it explictely in the stylesheet.
	
	Gecko 1.9 switched to using ATSUI, and both the full name and the Japanese name are supported. Other browsers also improved their support for Japanese fonts since this research was first published. It is also no longer necessary to specifically add a font-family for bolding elements.
	
 A simplified stylesheet for cross-browser usage follows
 
	body {font-family:font-family: "Hiragino Kaku Gothic","ヒラギノ角ゴ Pro W3", sans-serif;}
	h1, h2 {font-family:font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", serif;font-weight:bold;}
	
	*/

	/*
	 * https://readium.org/readium-css/docs/CSS08-defaults.html
	 * Fuentes mincho (serif)
	 * Siglas:
	 *   P en "MS PMincho":  proportional latin characters (no monoespaciado)
	 *   Sin P en "MS Mincho": fixed-width latin characters (monoespaciado)
	 *   N en "Hiragino Mincho ProN": parece que es "new":
	 *     https://japanese.meta.stackexchange.com/a/1099
	 *       I am not sure what the "N" stands for, but apparently it supports the relatively new JIS X 0213:2004 standard,
	 *       so I guess "N" means "new". (It appears though, that only 168 characters have changed shape in this new JIS2004
	 *       standard, so you'd probably be safe using either version.)
	 * https://stackoverflow.com/a/14573813
	 * https://www.tam-tam.co.jp/tipsnote/html_css/post10913.html
	 * https://bugs.chromium.org/p/chromium/issues/detail?id=447843#c7
	 *   OS X has contained Hiragino Kaku Gothic/Mincho ProN fonts which adapt JIS X 0213:2004 glyph forms and used them since
	 *   10.5. This CL makes Chromium use ProN fonts instead of Pro fonts.
	 * https://www.dtp-transit.jp/misc/web/post_1881.html
	 *   疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。
	 *   「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。
	 * https://qiita.com/gonshi_com/items/99f06488c52dc9b865bb
	 *   2015 ver.
	 *   Macで游明朝を使うかヒラギノ明朝を使うかは好みによるところでしょう。
	 *   WindowsだとHG明朝というのを指定することで、アンチエイリアスのかかった明朝体を表示することができます。
	 */
	
	/*
	* http://unicode.org/mail-arch/unicode-ml/y2009-m08/0058.html
	
	Here are details of Hiragino fonts bundled with Mac OS X: 

	Hiragino Kaku Gothic is a sans serif typeface (like Helvetica) and has 
	the following three weights: 
		Hiragino Kaku Gothic ProN W3 (Regular) 
		Hiragino Kaku Gothic ProN W6 (Bold) 
		Hiragino Kaku Gothic StdN W8 (Extra Bold) 

	Hiragino Mincho is a serif typeface (like Times) and has the following 
	two weights: 
		Hiragino Mincho ProN W3 (Regular) 
		Hiragino Mincho ProN W6 (Bold) 

	Hiragino Maru Gothic is a sans serif typeface with rounded stroke 
	edge. One weight "Hiragino Maru Gothic ProN W4". This typeface a bit 
	more casual compared to the first two. 

	Hiragino Sans GB is a Simplified Chinese font. The style is compatible 
	with Hiragino Kaku Gothic (sans serif). It covers GB18030-2000 and 
	Adobe-GB1-4. The font is Chinese government approved. This is new in 
	SnowLeopard 10.6. 
		Hiragino Sans GB W3 (Regular) 
		Hiragino Sans GB W6 (Bold) 

	Deciphering Hiragino font names: 
	"Pro" in the name means the font covers JIS X 0213 and Adobe-Japan1-5 
	glyph collection. They cover rare Kanjis. "Std" means it covers the 
	basic character set, JIS X 0208 and Adobe-Japan1-3. The Pro/Std 
	distinction might be similar to fonts with standard and extended 
	Latin. "N" attached to Pro or Std means it confirms to new glyph 
	shapes suggested by 2004 version of JIS X 0213. Mac OS X 10.4 and 
	earlier has fonts without the "N". Mac OS X 10.5 or later has both 
	with and without the "N". "W" followed by a number designates the 
	weight with scale from 1 to 9. Mac OS X bundles most commonly used 
	weights. 

	- kida 

	*/
	
	/*
	* Fonts, fall-backs & Unicode
	* http://archivist.incutio.com/viewlist/css-discuss/111998
	
	I'm not sure what limitation you have in mind. If you list
	a lot of fonts, the CSS font fallback algorithm will check
	all of them on a *per character* basis, until it finds one
	that has the glyph it needs. In some cases, this means the
	text will be rendered in multiple fonts, because the first
	font listed had some characters but not others, and the
	second font had the remaining characters, etc.

	The last step in the fallback algorithm is for the UA to
	check its "default font" for the glyphs. On some OSes, this
	"default font" is actually a set of fonts that collectively
	covers the widest possible range of characters. And the
	spec explicitly gives the UA permission to use any means
	it wishes to find an appropriate glyph before falling back
	to a missing character rendering.

		 http://www.w3.org/TR/CSS21/fonts.html#algorithm
		 http://www.w3.org/TR/css3-fonts/#font-matching-algorithm

	If you want to exclude certain characters from a font from
	ever being matched, then you would need to use an @font-face
	rule with a unicode-range descriptor. This functionality was
	part of CSS2, but was removed from CSS2.1 due to lack of
	implementation, and has been re-introduced for CSS3.

	Was there something else you wanted?

	~fantasai

	*/
	/* https://stackoverflow.com/a/15261825
	 * https://stackoverflow.com/a/41983984
	 * Desactivar Font Boosting / text inflation
	 */

	text-size-adjust: 100%;

	/*
	font: 16px Cambria, Georgia, "Times New Roman", Times, "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	*/
}

a {
	text-decoration: none;
}

/*layout*/
.boxShadow {
	box-shadow: 0 1px 5px 0 rgb(180,180,180);
	margin-bottom: 32px;
	text-align: justify;
	list-style:decimal;
	background: white;
	overflow: hidden;
}

.top-header {
	background-size: cover;
	background-position: center;
	height: 128px;
	padding: 32px 0 0 32px;
	margin-bottom: 16px;
	position: relative;
	z-index: -1;	/* Para no tapar el menú desplegable. */
}

.top-header div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	/*No funciona en IE7*/
	position: absolute;
	top: 0;
	right: 0;
	padding: 1%;
	color: white;
	background: rgb(123, 121, 143);
	width: 25%;
	min-width: 11rem;
	height: 100%;
}

.top-header h2 {
	color: rgb(240,240,240);
	font-variant: small-caps;
	font-weight: bold;
	background: url(images/icons.png) no-repeat;
	padding: 24px 0 0;
	margin-bottom: 12px;
}


#headerHome {
	background-image: url(images/headers/header_home.jpg);
}

#headerHome h2{
	background-position: 85% 0;
}

#headerWork {
	background-image: url(images/headers/header_work_3.jpg);
}

#headerWork h2{
	background-position: 85% 33%;
}

#headerArticles {
	background-image: url(images/headers/header_articles.jpg);
}


#headerArticles h2 {
	background-position: 85% 66%;
}

#headerContact {
	background-image: url(images/headers/header_contact_2.jpg);
}

#headerContact h2{
	background-position: 85% 98%; /*No es -196-4*24=-288 porque la última imagen tiene algo de margen inferior */
}

.menu-item.current-menu-item, .menu-item.current-menu-ancestor, .currentTab {
	background: #0aa;
}

.menu-mimenu-container .current-menu-item a, .menu-mimenu-container .current-menu-ancestor .current-menu-item a {
        color: yellow;
}

.menu-mimenu-container a:hover {
        color: rgb(100,0,0);
}


.currentTab>a {
	color: #ccc;
	cursor: default;
}

@media only screen and (orientation: portrait) {

	.menu-mimenu-container {
		width: 100%;
		top: 0;
		font-size: 0.8rem;
		/*
		 * He puesto z-index: 1 porque el código del plugin Syntax Highlighter tapa al menú. No veo la razón, según el
		 * stacking order no debería haber problema, pero bueno...
		*/
		z-index: 1;

	}

	header {
		margin-top: calc(19px + 2 * var(--touch-anchor-padding));
	}

	.menu-mimenu-container ul li {
		width: 100%;
		background: rgb(0, 41, 42);
		/*outline: 1px solid red;*/
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-right: 1px solid rgb(240,240,240);
		border-top: 1px solid rgb(240,240,240);
		float: left;
		text-align: center;
		position: relative;
	}



	/* Operador ">" selecciona hijos de primer nivel */
	.menu-mimenu-container > ul > li {
		width: 25%;
	}

	/* :last-child no va a funcionar en IE8 */
	.menu-mimenu-container > ul > li:last-child {
		border-right: none;
	}
	/*
     * Antes he puesto los link tags como bloque porque de lo contrario no puedo aplicar correctamente el padding:
     * http://www.maxdesign.com.au/articles/inline/
     * While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content.
     */






	/* Los submenús a partir del tercer nivel van acumulando a la derecha */
	.menu-mimenu-container ul ul ul {
		left: 100%;
		top: -1px;                         /* Pongo este -1px para que se alineen los bordes */
	}

	/* Los list items de submenús no están en horizontal (sobreescribimos la regla .menu-mimenu-container ul li {... float: left; }), sino en vertical */
	.menu-mimenu-container ul ul li {
		float: none;
	}
	.menu-mimenu-container ul li a {
		padding: var(--touch-anchor-padding) 0;
	}
}

/* smartphones, touchscreens */
@media only screen and (hover: none) and (pointer: coarse) {
	/* Sobreescribo reglas CSS en lugar de separarlas mediante media queries "hover:none" y "hover:hover" porque no
	 * todos los exploradores soportan éstas todavía.
	 */
	.menu-mimenu-container {
		top: inherit;
		bottom: 0;
	}



	header {
		margin-top: 0;
	}

	footer {
		margin-bottom: calc(19px + 2 * var(--touch-anchor-padding));
	}
}


@media only screen and (orientation: landscape) {

	.top-header, .content, footer {
		margin-left: var(--vertical-menu-width);
	}

	.menu-mimenu-container {

		height: 100%;
		background-color: black;
		width: var(--vertical-menu-width);
		font-size: 0.9rem;

	}

	/* Operador ">" selecciona hijos de primer nivel */
	.menu-mimenu-container > ul > li {
		border-bottom: 1px solid #7aa;
	}

	.menu-mimenu-container ul li:hover {
		background: #7aa;
		color: white;
	}

	.menu-mimenu-container ul li a {
		padding: var(--no-touch-anchor-padding);
	}

}

.menu-mimenu-container {
	position: fixed;
	text-transform: uppercase;

	/*overflow: hidden;*/

	/*background: rgb(90,90,90);*/
}

/* Todos los submenús de segundo nivel en adelante (o lo que es lo mismo, todos menos los de primer nivel)*/
.menu-mimenu-container ul ul {
	display: none;                     /* No se muestran por el momento. Lo harán cuando se pase el puntero por el list item correspondiente del menú padre (ver más abajo)*/
	position: absolute;                /* Los extraigo del flujo normal del documento. Este absolute se sitúa en base al padre más cercano en el fichero HTML que tenga la regla CSS "position: relative" , es decir,  .menu-mimenu-container ul li {... position: relative; }. Al final, resulta que todos los elementos de menú (list item , li) tienen position: relative, y todos los submenús de segundo nivel en adelante, position: absolute. */
	width: 80%;                        /* La anchura del ul hijo es el 80% de la del padre */
}

.menu-mimenu-container ul li a {
	color: white;
	;
	font-weight: bold;
}

.menu-mimenu-container ul {
	list-style: none;
}




/* Los submenús sólo se muestran cuando el puntero está sobre el elemento correspondiente del menú padre. Sólo se muestra el submenú hijo inmediato, ya que estamos utilizando el operador ">". */
/*
.menu-mimenu-container ul li:hover > ul {
	display: block;
}/*

/*
 * He puesto un id "blog-content" separado de "content" porque no quiero utilizar otras reglas (ver más abajo) que afectan a éste último.
 */

#content, #blog-content, aside {
	margin-top: 16px;
	padding-bottom: 16px;
}

#blog-content {
	column-rule: 4px double darkolivegreen;
	--blog-content-top-margin: 2rem;

}



@media screen and (max-width: 992px) {
	#blog-content {
		column-count: 1;
	}



}
@media screen and (min-width: 993px) {

	#blog-content.post-singular div.post {
		width: 65%;
	}
	#blog-content.posts-index .post {
		break-inside: avoid-column;
		page-break-inside: avoid;
	}
	#blog-content.posts-index {
		column-count: 2;
	}

	.trabajos {
		width: 50%;
	}

}

@media screen and (min-width: 1643px) {
	#blog-content.post-singular div.post {
		width: 50%;
	}
}

.post {
	/* Con float: left no funcionaba bien en Firefox. Al cargar /blog por primera vez se reparte bien entre las
	columnas. Sin embargo, al avanzar a /blog/2 y luego retroceder otra vez recargando /blog (no con el botón de
	retroceder del navegador, sino dando el enlace "Página anterior" o dando a "blog" en el menú) la segunda columna se
	queda con menos elementos, desequilibrada. El cambio ha sido de float: left a display: block +  overflow: hidden
	(el overflow: hidden es para que no se quede con altura 0).
	 */
	display: block;
	overflow: hidden;
}

#blog-content h1 {
	margin: var(--blog-content-top-margin) 0 1.5rem 0;
	font-size: 1.5rem;
}

#blog-content h2 {
	margin: 2rem 0 1.5rem 0;
}

#blog-content h3 {
	margin: 1.5rem 0 1rem 0;
}

#blog-content article, aside section {
	margin-bottom: 1em;
}

#blog-content article {
	float: left;

	border-top: 2px solid rgb(200,200,200);
}

@media screen and (max-width: 992px) {

	#blog-content article {
		width: 80%;
	}

}

@media screen and (min-width: 993px) {


	#blog-content article {
		width: 86%;
	}

}

#content {
	padding: 1em;
}

/* No quiero que haya imágenes de la sección anterior al lado de una nueva sección */
#content article{
	clear: both;
}

/* Sobreescribir la regla #content section {... clear: both; } */
#content .separator article{
	clear: none;
}

#content .separator {
	/*border: 1px solid red;*/
	overflow: hidden;
	padding: 2em 0;
	border-bottom: 1px solid #ccc;
}

#content .separator article:first-child {
	float: left;
	width: 46%;	/* (100 - 2*(padding_#content = 4) - 2*(espacio_columnas = 4)) / 2_columnas * 100/(100 - 2*(padding_#content = 4)) = 42*100/92 = 45.65 ~=46 */
	padding-right: 4%;
	border-right: 1px solid #ddd;
}

#content .separator article img{
	
	margin: 2em 0;
}

/*
 * http://stackoverflow.com/questions/8840802/first-child-and-last-child-with-ie8
 * Since :last-child is a CSS3 pseudo-class, it is not supported in IE8. I believe :first-child is supported, as it's defined in the CSS2.1 specification.
 * One possible solution is to simply give the last child a class name and style that class.
 * Another would be to use JavaScript. jQuery makes this particularly easy as it provides a :last-child pseudo-class which should work in IE8. Unfortunately, that could result in a flash of unstyled content while the DOM loads.
 * :last-child es CSS3 y no funciona en IE8.
 * Si no pongo nada, latex.shtml sigue funcionando bien porque "#content div section:first-child" es una regla más específica que "#content div section". 
 */
#content .separator article/*:last-child*/ {
	float: right;
	width: 46%;
	/*
	* O bien:
	* float: left;
	* padding-left: 4%;
	*/
}

#pagedNavigation {
	text-align:center;
	column-span: all;
}

#feed-icon {
	width: 15px;
}

@media only screen and (orientation: landscape) and (max-width: 992px) {
	aside {
		margin-left: var(--vertical-menu-width);
	}


}



@media only screen and (orientation: landscape) and (min-width: 993px) {
	aside {
		position: fixed;
		width: var(--vertical-menu-width);
		bottom: 0;
		left: 0;
		max-height: 65%;
		overflow-y: scroll;
		color: lightcyan;
	}
	/*
	 * https://stackoverflow.com/a/35203104
	 * Aunque ponga overflow-scroll, Chrome no me pone el scroll hasta que hago hover.
	 */
	aside::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 7px;
	}
	aside::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background-color: turquoise;
		-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
	}

	aside a {
		color: turquoise;
	}

}

@media only screen and (orientation: portrait) {
	aside {

	}
}



aside h3 {
	font-variant: small-caps;
	margin: 0.5em 0;
}

aside section {
	margin-left: 10%;
	margin-right: 10%;
	padding-top: 10px;
	border-top: 1px solid #ccc;
}

aside section ul {
	list-style: none;
}

aside section ul li {
	text-transform: capitalize;
}


.welcome-image {
	display: block;
	width: 100%;
	/*
	Problema height: 100vh en móvil:
	https://stackoverflow.com/a/37113430
	https://dev.to/admitkard/mobile-issue-with-100vh-height-100-100vh-3-solutions-3nae
	https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
	https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
	El problema de la solución con -webkit-fill-available es que al rotar el móvil no se adapta. Tampoco me gusta que
	sólo funcione con webkit.
	Al final he optado por la solución de poner todos los padres hasta llegar aquí con height 100% (ver al principio de
	este CSS).
	 */
	height: 100%;
	/* https://stackoverflow.com/a/26967278/12315725 */
	object-fit: cover;
	/* https://css-tricks.com/on-object-fit-and-object-position/ */
	object-position: 50% 25%;
}


.news {
	background: rgb(237, 228, 214);
	clear: both;
	/*float: left;*/
	/*margin-right: 4%;*/
	/*width: 44%;*/
	padding: 2%;
	border: none;
	margin: 40px 0;
	/*border-radius: 15px 0 15px 0;*/
	font-size: 90%;
}

.news + .news {
	margin-right: 0;
}

.news h2 {
	margin-top: 0;
}
/*Antes he puesto a como block, dentro de la clase news lo pongo como inline.*/
.news a {
	display: inline;
}

footer {
	clear: both;
	border: 1px solid rgb(180,180,180);
	background: rgb(235,235,235);
}

#banner {
	font-size: 4rem;
	margin: .35em 0;
	color: rgb(220, 220, 220);
	text-align: right;
	margin: 0 12px;
}

#banner-info {
	font-family: monospace;
	color: lightslategray;
	font-size: 12px;
}

footer ol {
	line-height: 3em;
	height: 3em;
	border-bottom: 1px solid #BBBBBB;
	list-style: none;
}



footer ol li {
	padding: 0 1em 0 .5em;
	float: left;
	background: url(images/breadcrumb_separator_mio.png) no-repeat 100% 50%;
	
}
/*
 * Como IE < 9 no puede procesar SVG, oculto la regla que lo utiliza mediante el keyword "only". IE9 sí que entrará y sobreecribirá el background de PNG (ver arriba) por el vectorial.
 * http://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries
 * http://www.w3.org/TR/css3-mediaqueries/#media0
 * The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
 */
@media only screen {
	footer ol li {
		background: url(images/breadcrumb_separator_mio.svg) no-repeat 100% 50%;
	}
}

/*
 * Cuidado no poner espacio entre "li" y ".last"
 * Utilizo la clase "last" porque IE8 no admite :last-child
 */
footer ol li.last {
	background: none;
}

footer ol li:first-child a{
	
	background: url(images/icons.png) no-repeat;
	
	background-size: 75%;	/*No funciona en IE8*/
	
	/*background: url(images/icons2.png) no-repeat 50%;*/
	width: 30px;/* Puedo poner width porque he declarado los link tags como block */
	text-indent: -9999px;/* Sólo quiero que se vea icono, no el texto. Además, ayuda a los screen readers. */
}

#footerHome a{
	background-position: 50% -10%;
}
#footerWork a{
	background-position: 50% 30%;
}
#footerArticles a{
	background-position: 50% 70%;
}
#footerContact a{
	background-position: 50% 110% /*No es -196-4*24=-288 porque la última imagen tiene algo de margen inferior */
}

footer a {
	display: block; /* Para que line-height y padding afecten a <a> */
}

.menu-mimenu-container a {
	display: block;
}

/*tipografía*/
#content h1 {
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-weight: normal;
	font-size: 2rem;
	color: rgb(160,160,160);
	letter-spacing: .1em;
}



.content p, .content ul, .content ol, .content ol {
	/*clear: left;*/
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 1.5em;
}

#content h3 {
	font-size: 1.2rem;
	margin: 1em 0 .5em 0;
}

#content h2 {
	font-size: 1.8rem;
	margin-bottom: .5em;
	font-weight: normal;
	font-variant: small-caps;
	border-bottom: 2px solid rgb(76, 67, 65);
    margin-top: 1.5em;
	margin-bottom: 1em;
	overflow: hidden; /* Para que border-bottom respete el margen de una imagen float:right */
}


@media screen and (max-width: 992px) {

	.calendar {
		margin-right: 4%;
		width: 10%
	}

}

@media screen and (min-width: 993px) {


	.calendar {
		margin: 0 2.5%;
		width: 5%
	}

}

.calendar {
	margin-top: var(--blog-content-top-margin);
	float: left;
	clear: left;
	/*background: yellow;*/
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	

	background: #fcfcfc; 
	background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%); 
	background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%); 
	background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%); 
	border: 1px solid #d2d2d2;
	
	/*
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	*/
	box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	
}








.calendar time {
	display: block;
	font-family: Helvetica, sans-serif; 
	font-size: 1.5rem; text-align: center; color: #9e9e9e;
}
.calendar time abbr {
	background: #d10000; 
	background: linear-gradient(top, #d10000 0%, #7a0909 100%);
	background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
	background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
	font-size: 0.625rem; font-weight: bold; color: #fff; text-transform: uppercase;
	display: block;
	border-top: 2px solid #a13838;
	/*
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
	padding: 6px 0 6px 0;
	*/
	padding: 2px 0 3px;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}


.trabajos figure {
	margin: revert;
}

figure img {
	max-width: 100%;
}