#divMes1 {
	grid-area: mes1
}

#divMes2 {
	grid-area: mes2
}

#divMes3 {
	grid-area: mes3
}

#divMes4 {
	grid-area: mes4
}

#divMes5 {
	grid-area: mes5
}

#divMes6 {
	grid-area: mes6
}

#divMes7 {
	grid-area: mes7
}

#divMes8 {
	grid-area: mes8
}

#divMes9 {
	grid-area: mes9
}

#divMes10 {
	grid-area: mes10
}

#divMes11 {
	grid-area: mes11
}

#divMes12 {
	grid-area: mes12
}

:root {
	--FondoDivs: rgb(228, 95, 95);
	--ancho1: 450px;
	--ancho2: 650px;
	--ancho3: 950px;
	--ancho4: 1450px;
	--colorBlanco: white;
	--colorFeriados:rgb(225, 68, 143);
}

.nolaboral {
	color: var(--colorFeriados);
}

body {
	margin: 20px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

table {
	min-width: 17em;
	max-height: 100px;
}

footer, header {
	background-color: var(--FondoDivs);
	padding: 15px;
	color: var(--colorBlanco);
	margin-top: 20px;
	font-weight: bold;
}

header div:nth-child(1) {
	font-size: xx-large;
	width: auto;
	border-bottom: 3px solid var(--colorBlanco);
	padding-bottom: 0.5em;
}

header div:nth-child(2) {
	font-size: xxx-large;
	text-shadow: rgb(184, 68, 74) 0.10em 0.10em;
}

#contenedorCalendario {
	display: grid;
	justify-content: space-evenly;
	align-items: stretch;
	grid-row-gap: 2em;
}

#contenedorCalendario>table {
	font-family: Arial, Helvetica, sans-serif;
}

h3 {
	margin-left: 0.5em;
}

td {
	text-align: center;
	font-weight: bold !important;
}

#contenedorCalendario thead td {
	color: grey !important;
}

#contenedorCalendario img {
	max-height: 1em;
}

.refermes {
	display: grid;
	grid-template-columns: 3em calc(100% - 60px);
	margin-top: 0.5em;
	font-size: xx-small;
	text-align: right;
}

.botonImprimir{
	font-size:x-large;
	font-size:x-large;
	border-radius: 15px;
	padding: 10px 20px;
	color: black;
	cursor:pointer;
	transition: 0.3s;
	border: 0px solid grey;
	/*animation: blinker 5s linear infinite;*/
}
/*
@keyframes blinker {
  50% {
	opacity: 0.25;
  }
}
*/
.botonImprimir:hover{
	background-color: rgb(219,219,219);
}

#referenciasFeriados {
	border: 1px solid gray;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	margin: 15px 50px 15px 50px;
	padding: 20px;
	display: none;
	/*grid*/
	grid-template-columns: auto auto auto auto;
	grid-row-gap: 1em;
}


@media screen and (min-width: 1950px) {
	#contenedorCalendario {
		grid-template-areas:
			"mes1 mes2 mes3 mes4 mes5 mes6"
			"mes7 mes8 mes9 mes10 mes11 mes12";
	}
}

@media screen and (min-width: 1250px) and (max-width:1949px) {
	#contenedorCalendario {
		grid-template-areas:
			"mes1 mes2 mes3 mes4"
			"mes5 mes6 mes7 mes8"
			"mes9 mes10 mes11 mes12";
	}
}

@media screen and (min-width: 950px) and (max-width:1249px) {
	#contenedorCalendario {
		grid-template-areas:
			"mes1 mes2 mes3"
			"mes4 mes5 mes6"
			"mes7 mes8 mes9"
			"mes10 mes11 mes12";
	}
}

@page {
	size: A4;
	margin: 0;
}

@media print {
	body {
		margin: 0;
		border: initial;
		border-radius: initial;
		width: initial;
		min-height: initial;
		box-shadow: initial;
		background: initial;
		page-break-after: always;
	}

	* {
		-webkit-print-color-adjust: exact !important;
		color-adjust: exact !important;
	}

	.letrasBlancas{
		color:transparent;
		text-shadow: var(--colorBlanco) 0 0;
	}

	.noprintable {
		display: none;
	}

	.refermes * {
		max-width: 180px !important;
	}

	body {
		font-size: 10px;
		padding: 0px 0px 0px 0px !important;
		margin: -18px 0px 0px 0px !important;
	}

	header div:nth-child(1) {
		font-size: x-large;
	}

	header div:nth-child(2) {
		font-size: xx-large;
		text-shadow: transparent;
	}

	footer {
		position: fixed;
		left: 3em;
		bottom: 3em;
	}

	#contenedorCalendario {
		margin-top: 2em;
		grid-template-areas:
			"mes1 mes2 mes3"
			"mes4 mes5 mes6"
			"mes7 mes8 mes9"
			"mes10 mes11 mes12";
		align-content: space-evenly;
	}
}

@media screen and (min-width: 650px) and (max-width:949px) {
	#contenedorCalendario {
		grid-template-areas:
			"mes1 mes2"
			"mes3 mes4"
			"mes5 mes6"
			"mes7 mes8"
			"mes9 mes10"
			"mes11 mes12";
	}
}

@media screen and (max-width: 650px) {
	#contenedorCalendario {
		grid-template-areas:
			"mes1"
			"mes2"
			"mes3"
			"mes4"
			"mes5"
			"mes6"
			"mes7"
			"mes8"
			"mes9"
			"mes10"
			"mes11"
			"mes12";
	}
}