body {
	margin: 0;
	padding: 0;
	background: url(recursos/fondo_tile_700px.jpg) repeat-y left top;
	background-color: linen;
	cursor: url(recursos/img/iconos/cursor.svg), pointer;
}
/* div, table, tr, td */
* {
	margin: 0;
	padding: 0;
}
/* @media (min-width:1008px) {
    body {
        background-color: black;
    }
} */



/* #region FUENTES EXTERNAS */

@font-face {
	font-family: Bebas;
	src: url(recursos/tipos/Bebas_Neue/BebasNeue-Regular.ttf);
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: Lato;
	src: url(recursos/tipos/Lato/Lato-Regular.ttf);
	font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family: Lato;
	src: url(recursos/tipos/Lato/Lato-Italic.ttf);
	font-style: italic;
	font-weight: 400;
}
@font-face {
	font-family: Lato;
	src: url(recursos/tipos/Lato/Lato-Bold.ttf);
	font-style: normal;
	font-weight: 600;
}
@font-face {
	font-family: Lato;
	src: url(recursos/tipos/Lato/Lato-Bold.ttf);
	font-style: normal;
	font-weight: 600;
}
/* @font-face {
	font-family: Lato;
	src: url(recursos/tipos/Lato/Lato-BlackItalic.ttf);
	font-style: italic;
	font-weight: bolder;
} */

@font-face {
	font-family: Lato;
	src: url(recursos/tipos/Lato/Lato-Black.ttf);
	font-style: normal;
	font-weight: 800;
}
/* #endregion FUESNTES EXTERNAS */

/* #region estilos texto */

h1 {
	display: none;
}
h2 {
	color: linen;
	text-align: right;
	font: normal normal 76px/100px Bebas, sans-serif;
}
h3 {
	font: italic 400 32px/32px Lato, sans-serif;
	color: #423224;
	/*aqui posicionamos el titulo para todas las entradas*/
	/*position: absolute;*/
	margin-left: 370px;
	width: 580px;
}
h4 {
	font: italic 400 24px/26px Lato, sans-serif;
	color: linen;
	margin: 10px 20px;
	text-align: right;
	padding: 0;
}
nav#menu a {
	list-style: none;
	list-style-position: inside;
	color: bisque;
	font: normal 400 20px/20px Lato, sans-serif;
	text-align: right;
	padding: 6px 20px;
}
nav#menu i{
	font-style: italic;
	font-size: 16px;
}
.p_base {
	/* column-count: 3;
    column-gap: 30px;
    column-rule: 1px solid lightgrey; */
	color: #423224;
	font: normal 400 22px/26px Lato, sans-serif;
}
p.num {
	color: linen;
	font: normal 800 56px/56px Lato, sans-serif;
	text-align: right;
	position: absolute;
	width: 362px;/*background-color: rosybrown; *//*se le da el estilo al texto y se le da ancho a la caja del <p>, se colocan al borde del corte marron*/
}
.art_text {
	font: normal 400 20px/32px Lato, sans-serif;
	color: #423224;/*aqui posicionamos el titulo para todas las entradas*/
}
div.mini_text p {
	color: #423224;
	font: italic 400 18px/20px Lato, sans-serif;
}
/* #endregion estilos texto */

/* #region header */

header#web_header {
	/*este div contiene la cabecera, y aqui se posiciona y da tamaño*/
	margin: 0;
	padding: 0;
	height: 300px;
	background-color: #FFC28C;
	background: url(recursos/img/fotos/header-80.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
header#web_header div {
	background-color: linen;
	width: 280px;
	height: 60px;
	padding-left: 25px;
	padding-right: 18px;
	margin-left: -25px;
	border-radius: 0 25px 25px 0;
	display: flex;
	justify-content: space-evenly;
	align-items : center;
	position: absolute;
	top: 220px;
	box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.6) inset;
	font-size: 30px;
}
a.rrss {
	text-decoration: none;
	color: #423224;
	transform: scale(1);
	transition: 0.2s;
}
a.rrss:link {
/*	color: #423224;*/
}
a.rrss:visited {
/*color: #423224;*/
}
a.rrss:hover {
	color: #C2936B;
	transform: scale(1.2);
}
a.rrss:active {
	color: darkred;
}
/* #endregion header */

/*  #region NAV*/

nav#menu {
	float: left;
	background-color: #C2936B;
	width: 250px;
	height: 100vh;
	overflow: auto;
	position: sticky;
	top: 0px;
	background-image: url("recursos/83_canvas fabric texture-seamless.jpg");
	background-size: contain;
	box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, 0.6);
	padding-top: 10px;
}
nav#menu_small {
	display: none;
transition-duration: 0.5s;
	transition-timing-function: ease;
}

nav#menu_small div.menu_txt{
		display: none;	
	transition-property: display;
		transition-duration: 0.5s;
	transition-timing-function: ease;
		transition-delay: 1s;
	}

nav#menu_small>div.burguer_icon {
	display: block;
transition-duration: 0.5s;
	transition-timing-function: ease;}


#menu ul, #menu_small ul {
	opacity: 70%;
}
#menu a, #menu_small a {
	display: block;
	text-align: left;
	text-decoration: none;
	color: #423224;
	transition: 0.2s;
}
#menu a:link {
}
#menu a:visited {
}
#menu a:hover {
	background-color: rgba(128, 97, 70, 0.3);
	filter: invert(1);
}
#menu_small a:hover {
	background-color: rgba(128, 97, 70, 0.3);
	filter: invert(1);
}
#menu a:active {
}
/* #endregion NAV*/


/* #region BOTON TOP */

div.top_button {
	position: fixed;
	right: 2%;
	bottom: 3%;
	z-index: 10;
	display: flex;
}
div.top_button a {
	font-size: 60px;
	text-decoration: none;
	color: orangered;
	transform: scale(1);
	opacity: 0.2;
	transition: 0.2s;
}
div.top_button a:link {
}
div.top_button a:visited {
}
div.top_button a:hover {
	color: orangered;
	/*color: #423224;*/
	opacity: 1;
	transform: scale(1.2);
}
div.top_button a:active {
	color: darkred;
}
/* #endregion BOTON TOP */


/* #region ARTICULOS*/

/*  #region TITULO */

div.div_intro {
	/*Este div contiene los div del título y el texto. Se posiciona en la página, fija tamaños y distancias al resto de cajas*/
	height: 460px;
	position: relative;
}
div.section_tittle {
	/* Este div es el que contiene el título h2, y aqui se fijan las medidas y se posiciona con respecto a su padre*/
	width: 362px;
	position: absolute;
	top: -14px;
}
div.intro_text {
	width: 40%;
	min-width: 360px;
	height: 100%;
	margin-left: 380px;
}
div.div_intro table {
	height: 100%;/*se especifica el 100% pq al resto de las tablas de los articulos se les quita la altura de la flecha*/
}
/* #endregion TITULO */

/*#region VALORES FIJOS DE TODOS LOS ARTÏCULOS*/

/*esta región contien todos los valores que son fijos en todos los artitulos*/

div.div_separador {
	/*este div sirve como espaciado general entre los artículos los articulos de la página
	el id lo lleva el div y asi se controla la posición cuando lo llama el enlace*/
	height: 10vmin;
}
section {
	/*desplazamiento de la pantalla para evitar el menu que queda fijo a la izquierda.
	El docuemnto contiene secciones en el apartado de artículos, la tabla y el autor.
	En estos mementos el footer no está planteado*/
	padding-left: 340px;
}
figure.foto img {
	/*tamaño de las figuras*/
	/*el tamaño de la figura depende del tamaño del artículo que la contine, se pueden ajustar 1 a 1*/
	height: calc(100% - 50px);
	position: absolute;
	top: 50px;
}
img.arrow {
	/*Esto es estandar para todos los artículos*/
	position: absolute;
	bottom: 0;
	left: 370px;
	height: 30px;
	transition-property: left, transform;
	transition-duration: 1s;
	transition-timing-function: ease;
}
div.text_article {
	background-color: linen;
	position: absolute;
	top: 50px;
	left: 360px;
	transition-property: left;
	transition-duration: 1s;
	transition-timing-function: ease;
}
div.text_article table {
	width: 100%;
	height: calc(100% - 30px);
	margin: 0;
	padding-left: 10px;
}
td {
	/* background-color: chocolate; */
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
/*#endregion VALORES FIJOS DE TODOS LOS ARTÏCULOS*/

/*#region VARIABLES ARTÍCULOS*/

/*esta región contien todos los datos asjutables para cada uno de los artículos*/

article.MonaLisa {
	position: relative;
	height: 755px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.MonaLisa div.text_article {
	/*necesita tb altura para conseguir el blanco*/
	width: 500px;
	height: calc(755px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.MonaLisa div.grupo:hover>div.text_article {
	left: 540px;
	/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
	transition-property: left;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
article.MonaLisa div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(540px + 10px);
	/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
	transition-property: left, transform;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
/*------------------------------------------------------------*/

article.UltimaCena {
	position: relative;
	height: 500px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.UltimaCena div.text_article {
	width: 500px;
	height: calc(500px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.UltimaCena div.grupo:hover>div.text_article {
	left: 820px;
	/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
	transition-property: left;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
article.UltimaCena div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(820px + 10px);
	/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
	transition-property: left, transform;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
/*------------------------------------------------------------*/

article.Guernica {
	position: relative;
	height: 400px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Guernica div.text_article {
	width: 500px;
	height: calc(400px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Guernica div.grupo:hover>div.text_article {
	left: 770px;
	/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
	transition-property: left;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
article.Guernica div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(770px + 10px);
	/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
	transition-property: left, transform;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
/*------------------------------------------------------------*/

article.Meninas {
	position: relative;
	height: 700px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Meninas div.text_article {
	width: 500px;
	height: calc(700px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Meninas div.grupo:hover>div.text_article {
	left: 566px;
	/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
	transition-property: left;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
article.Meninas div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(566px + 10px);
	/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
	transition-property: left, transform;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
/*------------------------------------------------------------*/

article.NocheEstrellada {
	position: relative;
	height: 700px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.NocheEstrellada div.text_article {
	width: 500px;
	height: calc(700px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.NocheEstrellada div.grupo:hover>div.text_article {
	left: 800px;
	/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
	transition-property: left;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
article.NocheEstrellada div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(800px + 10px);
	/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
	transition-property: left, transform;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
/*------------------------------------------------------------*/

article.Grito {
	position: relative;
	height: 700px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Grito div.text_article {
	width: 500px;
	height: calc(700px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Grito div.grupo:hover>div.text_article {
	left: 500px;
	/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
	transition-property: left;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
article.Grito div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(500px + 10px);
	/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
	transition-property: left, transform;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
/*------------------------------------------------------------*/

article.Sixtina {
	position: relative;
	height: 700px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Sixtina div.text_article {
	width: 500px;
	height: calc(700px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Sixtina div.grupo:hover>div.text_article {
	left: 516px;
	/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
	transition-property: left;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
article.Sixtina div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(516px + 10px);
	/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
	transition-property: left, transform;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
/*------------------------------------------------------------*/

article.Nenufares {
	position: relative;
	height: 600px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Nenufares div.text_article {
	width: 500px;
	height: calc(600px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Nenufares div.grupo:hover>div.text_article {
	left: 738px;
	/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
	transition-property: left;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
article.Nenufares div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(738px + 10px);
	/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
	transition-property: left, transform;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
/*------------------------------------------------------------*/

article.Memoria {
	position: relative;
	height: 600px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Memoria div.text_article {
	width: 500px;
	height: calc(600px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Memoria div.grupo:hover>div.text_article {
	left: 738px;
	/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
	transition-property: left;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
article.Memoria div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(738px + 10px);
	/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
	transition-property: left, transform;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
/*------------------------------------------------------------*/

article.Bicicleta {
	position: relative;
	height: 700px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Bicicleta div.text_article {
	width: 500px;
	height: calc(700px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Bicicleta div.grupo:hover>div.text_article {
	left: 530px;
	/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
	transition-property: left;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
article.Bicicleta div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(530px + 10px);
	/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
	transition-property: left, transform;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
/*------------------------------------------------------------*/

/*#region VARIABLES ARTÍCULOS*/

/* #endregion ARTICULOS*/

/* #region TABLA */

div.table_small {
	display: none;
}
section#place_table {
	/*	background-color: cornsilk;*/
	background-color: #E6AE7E;
}
table.place_table {
	background-color: #423224;
	width: 100%;
}
div.all_table, div.table_small, p.tfoot {
	background-color: #423224;
	width: 90%;
}
table.place_table th, table.place_table td {
	border-left: 1px solid cornsilk;
	background-color: #423224;
	width: calc(100% / 6);
}
table.place_table td.no_border {
	border-width: 0;/* width: 90%;*/
}
table.place_table td.center_col {
	text-align: center;
}
div.table_tittle div.div_separador {
	height: 20px;
	width: 90%;
}
table.place_table {
	background-color: #423224;
	border-collapse: collapse;
	margin-top: 40px;
	display: inline-block;
	overflow: auto;
	height: 150px;
	border-left: 10px solid #423224;
}
table.place_table th div {
	margin-top: -30px;
	position: absolute;
}
table.place_table th {
	font: normal bold 1rem/1.4rem Lato, Arial, Helvetica, sans-serif;
	text-align: left;
	vertical-align: top;
	padding: 0px 20px;
	color: cornsilk;
	text-transform: uppercase;
	background-color: #423224;
}
table.place_table td {
	font: normal normal 1rem/1.2rem Lato, Arial, Helvetica, sans-serif;
	text-align: left;
	vertical-align: top;
	padding: 5px 20px;
	color: cornsilk;
}
p.tfoot {
	font: italic normal 0.8rem/1rem Lato, Arial, Helvetica, sans-serif;
	text-align: left;
	vertical-align: top;
	padding: 10px 15px 15px 15px;
	color: cornsilk;
	width: 400px;
}
table.place_table tbody tr:hover>td {
	background-color: #806146;
	transition: 0.2s;
}
table.place_table a {
	text-decoration: none;
	font-size: 26px;
}
table.place_table a:link {
	color: #FFC28C;
	transition: 0.4s;
}
table.place_table a:visited {
	color: #FFC28C;
}
table.place_table a:hover {
	color: rgb(255, 248, 219);
}
table.place_table a:active {
	color: #806146;
}
div#mapa {
	width: 90%;
	background-color: #423224;
	height: 400px;
	box-sizing: border-box;
	padding: 10px;
	border-top: 1px solid cornsilk;
}
/* #endregion TABLA */

/* #region FORMULARIO */

section#formulario {
	background-color: #423224;
}
fieldset {
	width: 90%;
	padding: 10px calc((90% - 400px)/2);
	box-sizing: border-box;
	border: 1px solid #E6AE7E;
	border-top: 18px solid #E6AE7E;
}
legend {
	color: #E6AE7E;
	font: normal 800 20px/22px Lato, sans-serif;
	padding: 0 10px;
	margin: auto;
}
p.p_form {
	color: #E6AE7E;
	font: normal 100 18px/22px Lato, sans-serif;
	margin: 10px 0px;
	padding: 0 10px;
}
fieldset.input_edad legend {
	color: #423224;
	font: normal 400 16px/26px Lato, sans-serif;
	padding-top: 30px;
	margin-top: -20px;
	margin-left: -25px;
}
label {
	color: #423224;
	font: italic 400 14px/20px Lato, sans-serif;
}
label.text_checkbox {
	color: #E6AE7E;
	font: italic 400 14px/20px Lato, sans-serif;
}
fieldset.input_edad {
	width: 400px;
	margin: auto;
	background-color: linen;
	padding: 5px 30px 10px;
	box-sizing: border-box;
	border: 1px solid #E6AE7E;
}
input, textarea {
	margin: 5px auto;
	padding: 5px;
	width: 400px;
	background-color: linen;
	/*background-color: antiquewhite;*/
	border: 1px solid #E6AE7E;
	box-sizing: border-box;
}
input[type=radio], input[type=checkbox] {
	width: 10px;
	margin: auto;
}
input[type=image] {
	margin: 0 auto;
	height: 100%;
	background-color: rgba(255,255,255,0.00);
	border-width: 0px;
	box-sizing: border-box;
}
div.submit_but {
	width: 400px;
	height: 50px;
	background-color: #E6AE7E;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	align-items : center;
	margin: 20px auto 10px;
	border-radius: 10px;
}
div.submit_but:hover {
	border: 3px solid linen;
}
textarea {
	resize: none;
	height: 100px;
	overflow: auto;
}
input:focus, textarea:focus {
	outline: 3px solid red;
}
/* #endregion formulario */

/* #region WEBAUTHOR*/

section#webauthor {
	background-color: linen;/*height: 500px;*/
}
section#webauthor article {
	width: 90%;
	padding: 60px 0;
	overflow: hidden;
}
section#webauthor p.p_base {
	font-size: 18px
}
section#webauthor p.p_base span {
	color: #C2936B;
}
section#webauthor figure {
	float: right;
	margin-left: 30px;
	margin-bottom: 30px;
}
/* #endregion WEBAUTHOR*/


/* #region FOOTER*/

footer {
	background-color: slategrey;
	padding-left: 200px;
}
footer div.foot {
	left: 340px;
	height: 80px;
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
footer p {
	font-size: 18px;
	color: lavender;
}
footer div.redes {
	width: 30%;
	min-width: 240px;
	height: 40px;
	font-size: 26px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
footer a.rrss {
	text-decoration: none;
	color: lavender;
	transform: scale(1);
	transition: 0.2s;
}
footer a.rrss:hover {
	color: lavenderblush;
	transform: scale(1.2);
}
a.rrss:active {
	color: darkred;
}

/* #endregion FOOTER*/

@media screen and (max-width: 1050px) {
div.table_small {
	display: block;
}
div.all_table {
	display: none;
}
}

@media screen and (max-width: 1300px) {
body {
	margin: 0;
	padding: 0;
	background: url(recursos/fondo_tile_500px.jpg) repeat-y left top;
	background-color: linen;
}
h3 {
	margin-left: 240px;
	font: italic 400 26px/32px Lato, sans-serif;
	width: 320px;
	position: relative;
	top: -18px;
}
p.num {
	font-size: 80px;
	top: -8px;
	width: 224px;/*background-color: rosybrown; *//*se le da el estilo al texto y se le da ancho a la caja del <p>, se colocan al borde del corte marron*/
}
.art_text {
	font: normal 400 16px/22px Lato, sans-serif;
}
section {
	/*desplazamiento de la pantalla para evitar el menu que queda fijo a la izquierda.
	El docuemnto contiene secciones en el apartado de artículos, la tabla y el autor.
	En estos mementos el footer no está planteado*/
	padding-left: 280px;
}
div.div_intro {
	/*Este div contiene los div del título y el texto. Se posiciona en la página, fija tamaños y distancias al resto de cajas*/
	height: 450px;
	position: relative;/* margin-bottom: 100px; */
}
h2 {
	color: linen;
	text-align: right;
	font: normal normal 56px/80px Bebas, sans-serif;
}
.p_base {
	/* column-count: 3;
    column-gap: 30px;
    column-rule: 1px solid lightgrey; */
	color: #423224;
	font: normal 400 20px/24px Lato, sans-serif;
}
div.section_tittle {
	width: 222px;
}
div.intro_text {
	margin-left: 240px;
}
img.arrow {
	left: 230px;
}
div.text_article {
	left: 220px;
}
article.MonaLisa {
	position: relative;
	height: 650px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.MonaLisa div.text_article {
	/*necesita tb altura para conseguir el blanco*/
	width: 320px;
	height: calc(650px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.MonaLisa div.grupo:hover>div.text_article {
	left: 460px;
}
article.MonaLisa div.grupo:hover>img.arrow {
	left: calc(460px + 10px);
}
/*------------------------------------------------------------*/
	
article.UltimaCena {
	position: relative;
	height: 360px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.UltimaCena div.text_article {
	width: 360px;
	height: calc(360px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.UltimaCena div.grupo:hover>div.text_article {
	left: 560px;
}
article.UltimaCena div.grupo:hover>img.arrow {
	left: calc(560px + 10px);
}
/*------------------------------------------------------------*/

article.Guernica {
	position: relative;
	height: 320px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Guernica div.text_article {
	width: 380px;
	height: calc(320px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Guernica div.grupo:hover>div.text_article {
	left: 600px;
}
article.Guernica div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(600px + 10px);
}
/*------------------------------------------------------------*/

article.Meninas {
	position: relative;
	height: 600px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Meninas div.text_article {
	width: 360px;
	height: calc(600px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Meninas div.grupo:hover>div.text_article {
	left: 480px;
}
article.Meninas div.grupo:hover>img.arrow {
	left: calc(580px + 10px);
}
/*------------------------------------------------------------*/

article.NocheEstrellada {
	position: relative;
	height: 500px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.NocheEstrellada div.text_article {
	width: 360px;
	height: calc(500px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.NocheEstrellada div.grupo:hover>div.text_article {
	left: 556px;
}
article.NocheEstrellada div.grupo:hover>img.arrow {
	left: calc(556px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/

article.Grito {
	position: relative;
	height: 580px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Grito div.text_article {
	width: 360px;
	height: calc(580px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Grito div.grupo:hover>div.text_article {
	left: 400px;/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
}
article.Grito div.grupo:hover>img.arrow {
	left: calc(400px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/

article.Sixtina {
	position: relative;
	height: 580px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Sixtina div.text_article {
	width: 360px;
	height: calc(580px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Sixtina div.grupo:hover>div.text_article {
	left: 420px;/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
}
article.Sixtina div.grupo:hover>img.arrow {
	left: calc(420px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/

article.Nenufares {
	position: relative;
	height: 460px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Nenufares div.text_article {
	width: 360px;
	height: calc(460px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Nenufares div.grupo:hover>div.text_article {
	left: 550px;/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
}
article.Nenufares div.grupo:hover>img.arrow {
	left: calc(550px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/

article.Memoria {
	position: relative;
	height: 420px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Memoria div.text_article {
	width: 360px;
	height: calc(420px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Memoria div.grupo:hover>div.text_article {
	left: 490px;/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
}
article.Memoria div.grupo:hover>img.arrow {
	left: calc(490px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/

article.Bicicleta {
	position: relative;
	height: 580px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Bicicleta div.text_article {
	width: 360px;
	height: calc(580px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Bicicleta div.grupo:hover>div.text_article {
	left: 480px;/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
}
article.Bicicleta div.grupo:hover>img.arrow {
	left: calc(480px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/
	
footer div.foot {
	height: 140px;
	width: 80%;
	margin: auto;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}
}


@media screen /*and (min-width: 900px)*/ and (max-width: 900px) {
body {
	margin: 0;
	padding: 0;
	background: url(recursos/fondo_tile_400px.jpg) repeat-y left top;
	background-color: linen;
}
nav#menu {
	display: none;
}
nav#menu_small {
	float: left;
	background-color: #C2936B;
	width: 50px;
	height: 50px;
	overflow: hidden;
	position: sticky;
	z-index: 2;
    top: 0px;
	background-image: url("recursos/83_canvas fabric texture-seamless.jpg");
	background-size: contain;
	box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, 0.6);
	padding-top: 10px;
	display: block;	
	/*transition-property: width, height;*/
	transition-duration: 0.5s;
	transition-timing-function: ease;
    
}
	
	nav#menu_small:hover {
	width: 250px;
	height: 520px;
		
}
	
nav#menu_small:hover>div.burguer_icon {
display: none;
}
	
nav#menu_small:hover>div.menu_txt {
display: block;
				
}
	
div.burguer_icon {
	padding: 12px;
	width: 20px;
	float: left;
    
}
	nav#menu_small a {
		color: bisque;
	font: normal 400 18px/22px Lato, sans-serif;
	text-align: right;
	padding: 2px 20px;
  
}
	nav#menu_small ul {
	list-style: none;
		list-style-position: inside;}
	
	
h3 {
	margin-left: 240px;
	font: italic 400 26px/32px Lato, sans-serif;
	width: 320px;
	position: relative;
	top: -18px;
}
p.num {
	font-size: 80px;
	top: -8px;
	width: 224px;/*background-color: rosybrown; *//*se le da el estilo al texto y se le da ancho a la caja del <p>, se colocan al borde del corte marron*/
}
.art_text {
	font: normal 400 16px/22px Lato, sans-serif;
}
section {
	/*desplazamiento de la pantalla para evitar el menu que queda fijo a la izquierda.
	El docuemnto contiene secciones en el apartado de artículos, la tabla y el autor.
	En estos mementos el footer no está planteado*/
	padding-left: 180px;
}
div.div_intro {
	/*Este div contiene los div del título y el texto. Se posiciona en la página, fija tamaños y distancias al resto de cajas*/
	height: 450px;
	position: relative;/* margin-bottom: 100px; */
}
h2 {
	color: linen;
	text-align: right;
	font: normal normal 56px/80px Bebas, sans-serif;
}
.p_base {
	/* column-count: 3;
    column-gap: 30px;
    column-rule: 1px solid lightgrey; */
	color: #423224;
	font: normal 400 20px/24px Lato, sans-serif;
}
div.section_tittle {
	width: 222px;
}
div.intro_text {
	margin-left: 240px;
}
img.arrow {
	left: 230px;
}
div.text_article {
	left: 220px;
}
article.MonaLisa {
	position: relative;
	height: 650px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.MonaLisa div.text_article {
	/*necesita tb altura para conseguir el blanco*/
	width: 320px;
	height: calc(650px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.MonaLisa div.grupo:hover>div.text_article {
	left: 460px;
}
article.MonaLisa div.grupo:hover>img.arrow {
	left: calc(460px + 10px);
}
/*------------------------------------------------------------*/
	
article.UltimaCena {
	position: relative;
	height: 360px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.UltimaCena div.text_article {
	width: 360px;
	height: calc(360px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.UltimaCena div.grupo:hover>div.text_article {
	left: 560px;
}
article.UltimaCena div.grupo:hover>img.arrow {
	left: calc(560px + 10px);
}
/*------------------------------------------------------------*/

article.Guernica {
	position: relative;
	height: 320px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Guernica div.text_article {
	width: 380px;
	height: calc(320px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Guernica div.grupo:hover>div.text_article {
	left: 600px;
}
article.Guernica div.grupo:hover>img.arrow {
	transform: rotate(180deg);
	left: calc(600px + 10px);
}
/*------------------------------------------------------------*/

article.Meninas {
	position: relative;
	height: 600px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Meninas div.text_article {
	width: 360px;
	height: calc(600px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Meninas div.grupo:hover>div.text_article {
	left: 480px;
}
article.Meninas div.grupo:hover>img.arrow {
	left: calc(580px + 10px);
}
/*------------------------------------------------------------*/

article.NocheEstrellada {
	position: relative;
	height: 500px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.NocheEstrellada div.text_article {
	width: 360px;
	height: calc(500px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.NocheEstrellada div.grupo:hover>div.text_article {
	left: 556px;
}
article.NocheEstrellada div.grupo:hover>img.arrow {
	left: calc(556px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/

article.Grito {
	position: relative;
	height: 580px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Grito div.text_article {
	width: 360px;
	height: calc(580px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Grito div.grupo:hover>div.text_article {
	left: 400px;/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
}
article.Grito div.grupo:hover>img.arrow {
	left: calc(400px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/

article.Sixtina {
	position: relative;
	height: 580px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Sixtina div.text_article {
	width: 360px;
	height: calc(580px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Sixtina div.grupo:hover>div.text_article {
	left: 420px;/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
}
article.Sixtina div.grupo:hover>img.arrow {
	left: calc(420px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/

article.Nenufares {
	position: relative;
	height: 460px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Nenufares div.text_article {
	width: 360px;
	height: calc(460px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Nenufares div.grupo:hover>div.text_article {
	left: 550px;/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
}
article.Nenufares div.grupo:hover>img.arrow {
	left: calc(550px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/

article.Memoria {
	position: relative;
	height: 420px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Memoria div.text_article {
	width: 360px;
	height: calc(420px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Memoria div.grupo:hover>div.text_article {
	left: 490px;/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
}
article.Memoria div.grupo:hover>img.arrow {
	left: calc(490px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/

article.Bicicleta {
	position: relative;
	height: 580px;/*esta altura define la altura de la caja y de todo su contenido*/
}
article.Bicicleta div.text_article {
	width: 360px;
	height: calc(580px - 50px);/*el primer valor es el de la altura del artículo, elemento anterior*/
}
article.Bicicleta div.grupo:hover>div.text_article {
	left: 480px;/*este valor enpuja el texto hasta el final de la foto, es la anchura de la foto*/
}
article.Bicicleta div.grupo:hover>img.arrow {
	left: calc(480px + 10px);/*el primer valor coincide con la posición final del texto del artículo, elemento anterior*/
}
/*------------------------------------------------------------*/
	
	
	footer {
	background-color: slategrey;
	padding-left: 00px;
}

	
footer div.foot {

	height: 140px;
	width: 80%;
	margin: auto;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

}
/* #region COLORES*/

/* Color Theme Swatches in Hex */

.WebArte-1-hex {
	color: #C2936B;
}
.WebArte-2-hex {
	color: #806146;
}
.WebArte-3-hex {
	color: #FFC28C;
}
.WebArte-4-hex {
	color: #423224;
}
.WebArte-5-hex {
	color: #E6AE7E;
}
/* Color Theme Swatches in RGBA */

.WebArte-1-rgba {
	color: rgba(194, 147, 107, 1);
}
.WebArte-2-rgba {
	color: rgba(128, 97, 70, 1);
}
.WebArte-3-rgba {
	color: rgba(255, 194, 140, 1);
}
.WebArte-4-rgba {
	color: rgba(66, 50, 36, 1);
}
.WebArte-5-rgba {
	color: rgba(230, 174, 126, 1);
}
/* Color Theme Swatches in HSLA */

.WebArte-1-hsla {
	color: hsla(27, 41, 59, 1);
}
.WebArte-2-hsla {
	color: hsla(27, 29, 38, 1);
}
.WebArte-3-hsla {
	color: hsla(28, 100, 77, 1);
}
.WebArte-4-hsla {
	color: hsla(27, 29, 20, 1);
}
.WebArte-5-hsla {
	color: hsla(27, 67, 69, 1);
}

/* #endregion COLORES*/