/**********************
Name: Humberto Ríos Rodríguez
Version: 2.0
Author: Sandra Bermudez sandrax@bulabe.com
URL: http://humbertoriosrodriguez.com
/**********************/

/*
@import url('animate.css');
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');


*, html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}


@font-face {
	font-family: 'Figtree';
	src: url('fonts/Figtree-Regular.ttf');
	font-weight: 400;
}

/********************************************************************************************************************************************************
BASICS: TAGS
/********************************************************************************************************************************************************/

body {
	background-color: #DFDAD2;
	color: #191919;
	font-family: 'Figtree', sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
	text-align: center;
}

h1, h2, h3, p, li {
	font-weight: 400;
}

h1 {
	font-family:'DM Serif Display', 'serif';
	font-size: 46px;
	text-align: left;
	margin: 0 0 56px 0;
	line-height: 46px;
}

p {
	font-size: 16px;
	line-height: 28px;
	text-align: justify;
	margin-bottom: 21px;
	padding: 0 10%;
}

p.epigraph {
	text-align: right;
	font-style: italic;
	padding: 0 0 0 30%;
}

p.romano {
	font-family:'DM Serif Display', 'serif';
	font-size: 28px;
	text-align: center;
	margin: 32px 0;
}

p.sign {
	text-align: right;
	margin: 60px 0;
	font-weight: 600;
}

p.sign span {
	font-style: italic;
	display: block;
	font-weight: 400;
}

p.nota {

}

p.nota span {
	font-size: 11px;
}

ul {
	list-style-type: disc;
	list-style-position: inside;
}

li {

}

a:link, a:visited, a:active {
	text-decoration: underline;
	color: #E7E7E7;
}

a:hover {
	color: #fff;
	-webkit-transition: color 0.2s linear 0s;
	-moz-transition: color 0.2s linear 0s;
	-o-transition: color 0.2s linear 0s;
	transition: color 0.2s linear 0s;
}

a:link img, a:visited img, a:active img, a:hover img {
	border: none;
	background-color: transparent;
}

::selection,
::-moz-selection {
	background: #666;
	color: #fff;
}

hr {
	border: 1px solid #555;
	margin: 22px 0;
}

em {
	font-style: italic;
}


/*********************************************************************************
LAYOUT
/********************************************************************************/

div.wrapper {
	width: 960px;
	margin: 0 auto;
	padding: 0 0 60px 0;
}

.floatl { float: left; }
.floatr {	float: right; }
.clearfix {	clear: both; }



/*********************************************************************************
HEADER
/********************************************************************************/

div#header {
	height: 200px;
	padding: 0;
	margin: 0 0 36px 0;
	position: relative;
}

#logo {
	height: 180px;
	float: left;
}


/*********************************************************************************
NAV
/********************************************************************************/

ul#menu {
	list-style-type: none;
	width: 210px;
	margin: 90px 0;
	float: right;
	font-family:'DM Serif Display', 'serif';
}

ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:active {
	font-size: 16px;
	color: #4A4A4A;
	text-decoration: none;
	float: left;
	margin: 0 6px;
}

ul#menu li a:hover {
	color: #000;
}


#footer {
	width: 100%;
	background-color: #4A4A4A;
	padding: 30px 0;
}

#footer p {
	color: #F3F8FA;
	float: left;
	font-size: 12px;
	margin: 28px 0 0 0;
	padding: 0;
}

#footer img {
	height: 80px;
	float: right;
}




img#cover {
	width: 60%;
}



div.grid {
	width: 31%;
	height: 280px;
	float: left;
	overflow: hidden;
	margin: 8px;
}

div.grid img {
	width: 100%;
}




@media only screen and (max-width: 980px) {
	div.wrapper {
		width: 90%;
		left: 5%;
	}
	p {
		padding: 0 22px;
	}
	div.grid {
		width: 40%;
		height: auto;
	}
	div#header {
		height: 140px;
	}
}