html, body {
	height: 100%;
	overflow: auto
}
a {
	text-decoration: none;
	color: inherit
}
h1, h2 {
	margin: 0;
	padding: 0
}
body {
	font-weight: 400;
	background-color: #F5F5F5;
	line-height: 1.5;
	border-left: solid 10px #204156;
	font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif
}
.mainheader {
	border-top: solid 2px #F5BF03;
	border-bottom: solid 1px #DDDDDD;
	background-color: #FFF;
	overflow: hidden
}
.main-headline {
	color: #666;
	font-family: "Tinos", "Times New Roman" , serif;
	font-size: 1.5em;
	margin-bottom: 1em
}
.logo {
	background: transparent url("../images/logo.png") no-repeat top center;
	width: auto;
	height: 92px;
	padding-top: 100px;
	padding-left: 0;
	text-align: center;
	margin: 1em auto;
	margin-bottom: 2em;
	animation: all 1s ease;
	font-size: 1.2em
}
.appinfo {
	display: block;
	text-align: center;
	font-size: 1.8em
}
.infobar {
	background-color: #EEEEEE;
	padding: 1em 2em
}
.button {
	color: white;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	background: #1abc9c;
	border: 0px;
	border-bottom: 2px solid #12ab8d;
	cursor: pointer;
	box-shadow: inset 0 -2px #12ab8d;
	font-weight: bold;
	font-size: .8em;
	padding: .8em 1em;
	border-radius: .5em;
	margin: .5em 0;
	display: block;
	transition: all 1s ease
}
.field {
	margin: .5em 1%;
	padding: .5em 1%;
	font-size: 1em;
	border: solid #DFDFDF 1px
}
.gazettebar {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 2em
}
.byyear, .last-gazette {
	margin: 1em auto;
	margin-bottom: 1em;
	background-color: #FFF;
	border: solid 1px #DDD;
	padding: 2%
}
.last-gazette {
	background-color: #204156;
	color: #FFF
}
.byyear {
	background-color: #FFF;
	padding: 1em 0
}
.byyear:before, .byyear:after {
	clear:both;
	content: "";
	display: block
}
.byyear-label {
	clear: both;
	display: block;
	text-align: center
}
.byyear-button {
	float: left;
	width: 29%
}
.byyear-field {
	float: left;
	width: 29%
}
.byyear-field:focus {
	box-shadow: 0 0 5px #1ABC9C, 2px 2px 2px rgba(0,0,0,0.25) inset
}
.last-gazette__link {
	text-decoration: none;
	color: inherit;
	text-align: center;
	display: block;
	margin: 0 auto;
	font-weight: bold;
	padding: 0 1em;
	padding-top: 0
}
.last-gazette__image {
	display: block;
	width: 128px;
	border: 0;
	margin: 0 auto
}
.infobar-item {
	margin-bottom: 1.5em;
	font-size: .9em
}
.infobar-item__strong {
	font-weight: bold
}
.infobar-item__strong-link, .multi-diario-link {
	font-weight: bold;
	color: #3AF;
	text-decoration: none
}
.page-notice {
	color: #A57A23;
	font-size: .8em;
	padding: 1em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 1px;
	display: none;
	padding-left: 3em;
	font-weight: bold
}
.page-notice__warning {
	display: block;
	background: #F8c969 url("../images/warning.png") no-repeat left center
}

/* Modal */

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 24rem;
    border-radius: 0.5rem;
}
.close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}
.close-button:hover {
    background-color: darkgray;
}
.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.multi-diario-links {
	list-style-type: decimal;
	padding: 0 0 0 2.5em;
}
.multi-diario-title {
	font-size: 1.4em;
	margin-bottom: 2em;
}
.multi-diario-link {
	display: block;
	padding: .8em .5em;
}