@font-face {
    font-family: 'MrsEavRom';
    src: url('../fonts/MrsEavRom.eot');
    src: url('../fonts/MrsEavRom.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MrsEavRom.woff') format('woff'),
         url('../fonts/MrsEavRom.ttf') format('truetype'),
         url('../fonts/MrsEavRom.svg#dineng') format('svg');
    font-weight: normal; 
}

body, html{
	margin:0;
	padding:0;
    font-family: 'MrsEavRom',serif;
	font-size:100%;
	color:#7a7a7a;
	letter-spacing: 1px;
	line-height: 17px;
	
}



/* HEADER */
header{
	margin-top: 4%;
	text-align: center;
}
header h1{
	margin: 0;
	font-size:18px;
	font-weight: normal;
}
header h1 a:hover{
	text-decoration: none;
}

header ul{
	margin-top: 2%;
	list-style-type: none; 
	font-size: 18px;
	padding: 0;
}

header li{
	display: inline;
	margin: 0% 0.5%;
}

li.active a{
	color: #383E84;
}
/* END HEADER */

h2{
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 2%;
}

header a, #tableOfContent a{
	text-decoration: none;
	color: #7a7a7a;
}

header a:hover, #tableOfContent a:hover{
	/*text-decoration: underline;*/
	color: #C5C5C5;
}

a{
	color: #7a7a7a;
	text-decoration: none;
}

a:hover{
	color: #383E84;
}

footer{
	/*margin-top: 40px;*/
}
#container{
	text-align: center;
	margin: 5.5% auto 50px auto;
	width: 80%;
}

#homePageColor{
	margin: auto;
	width: 432px;
	height: 371px;
	background-color: #D7E3DF;
}

.clear{
	clear: both;
}

/* PEOMS / OTHER WRITINGS */
#poemDiv #nav{
	position: relative;
}

#poemDiv hr{
	margin-top: 5%;
	color: #d1992f;
	background-color: #d1992f;

}
#poemDiv #nav .arrow-right{
	right: -5%;
	top: 0;
	position: absolute;
}
.arrow-right{
	background-position: 10px 0px;
	right: -5%;
	float: right;
}

#otherWritting #tableOfContent{
	margin-top: 1.5%;
}
#nav{
	width: 40%;
	text-align: center;
	margin: auto;
	margin-bottom: 5%;
	font-size: 18px;
	height: 0;
	
}

.navTable{
	margin-bottom: 0% !important;
}

.titlepoem{
	visibility: hidden;
}
.title{
	cursor: pointer;
	margin: 0 5%;
	padding: 4px 0;
	
}
.arrow{
	background-image: url("../img/arrow-table-of-content_0.jpg");
	width: 10px;
	height: 18px;
	cursor: pointer;
	visibility: hidden;

}

.arrow-left{
	float: left;
}

.arrow:hover{
	background-image: url("../img/arrow-table-of-content.jpg");
}



#tableOfContent a{
	line-height: 30px;
}

#tableOfContent {
	font-size: 18px;
}

hr{
	color: #4e5287;
	background-color: #4e5287;
	width: 42%;
	border: 0;
    height: 1px;
	margin-bottom: 3%;
	max-width: 430px;
}

.containernews hr{
	color: #e3d189;
	background-color: #e3d189;
}

.biography hr{
	color: #9a5343;
	background-color: #9a5343;
}

.otherwr hr{
	color: #b3bbb0;
	background-color: #b3bbb0;
}

.contact hr{
	margin-top: 5%;
	margin-bottom: 0;
	color: #b3bbb0;
	background-color: #b3bbb0;
}

#poem{
	font-size: 14px;
	text-align: justify;
	width: 46%;
	margin: auto;
	visibility: hidden;
	max-width: 475px;
	
}

.poemBig{
	width: 60% !important;
	max-width: 700px !important;
}


#poem iframe{
	width: 100%;
}
#poem img{
	max-width: 100%;
	display: block;
	margin: auto;
}

#poem h2{
	text-align: center;
	padding: 4px 0;
}

.poemContainer #homePageColor{
	display: none;
}

/* END PEOMS / OTHER WRITINGS */

/* NEWS */
#navNews{
	margin: auto;
	margin-bottom: 40px;
	width: 30%;
	display: none;
}
#navNews .arrow{
	display: block;
}

.dateNews{
	/*float: left;*/
	text-align: center;
}

#navNews .numbers a{
	margin-left: 3px;
	margin-right: 3px;
}

#navNews .numbers a.active{
	color: #383E84;
}
.news{
	margin-bottom: 30px;
	text-align: center;
}


/* END NEWS */

/* BIOGRAPHY */

.bio-photo{
	/*margin-top: 7%;*/
	margin-top: 0 !important;
	margin-bottom: 20px;
}
.biography p{
	font-size: 14px;
	margin: auto;
	width: 35%;
	/*line-height: 22px;*/
	margin-bottom: 4%;
}

.biography a{
	font-size: 14px;
	line-height: 26px;
	color:#c5c5c5;
}

.biography a:hover{
	color: #7a7a7a;
}
/* END BIOGRAPHY */

.contact{
	font-size: 14px;

}

.contact p{
	margin-top: 15%;
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
.biography p{
		width:52%;
	}
	#container{
		width: 90%;

	}
	#poem, .poemBig{
		width: 80%;
	}

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	/* Styles */

	header h1{
		font-size:18px;
	}

	header ul{
		margin: 0;
		font-size:16px;
		font-weight: normal;
	}
	header ul{
		margin-top: 4%;
	}

	#homePageColor{
		margin: auto;
		width: 100%;
		height: 250px;
		background-color: #D7E3DF;
	}

	#container{
		width: 90%;

	}

	#nav{
		width: 100%;
		font-size: 14px;
	}

	.title{
		margin: 0 2%;
	}

	#tableOfContent,  h2{
		font-size: 14px;
	}

	#poem, .poemBig{
		width: 80%;
	}

	.biography p{
		width:80%;
	}

}