@charset "UTF-8"; 
/* enlaces principales de sección */
		.despliegaframes { 
    		display: grid;
    		grid-gap: 10px;
    		grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
    		margin: 15px auto;
    		padding: 0;
    		list-style: none;
			text-align:center;
		}
		ul.despliegaframes.frames3 {
			grid-template-columns: 1fr 1fr 1fr;
		}
		.despliegaframes li {
   			padding: 0;
		}
		.despliegaframes img {
    		max-width: 100px;
			width: 100%;
			height: auto;
			margin:10px auto;
		}
		.despliegaframes li a {
    		display: grid;
    		align-items: center;
    		justify-content: center;
    		width: 100%;
    		min-height: 250px;
    		padding: 10px 0;
    		border: 1px solid #fff;
    		border-radius: 15pt;
    		position: relative;
    		box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    		background: rgba(0 0 0/3%);
    		color: #fff;
    		font-weight: bolder;
			font-size: 14pt;
			font-family: 'foundrymonolinebold',helvetica;
    		text-align: center;
			text-decoration: none;
		}
		.despliegaframes li a:hover {
    		text-decoration: none;
    		color: #fff;
		}
		#framea{
			background-color:#009ACB;
		}
		#framea:hover{
			background-color: #00708E;
		}
		#frameb{
			background-color:#C32E1B;
		}
		#frameb:hover{
			background-color: #871819;
		}
		#framec{
			background-color:#F7A600;
		}
		#framec:hover{
			background-color: #DB6312;
		}
		#framed{
			background-color:#7BA02D;
		}
		#framed:hover{
			background-color: #5E7D2C;
		}
		a#framee {
			background: #494955;
		}
		a#framee:hover {
			background: #383842;
		}

/* enlaces de referencia */
		#despliegalinks { 
    		display: grid;
    		grid-gap: 10px;
    		grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
    		margin: 15px auto;
    		padding: 0;
    		list-style: none;
			text-align:center;
		}
		#despliegalinks li {
   			padding: 0;
		}
		#despliegalinks img {
    		max-width: 60px;
			width: 100%;
			height: auto;
			margin:10px auto;
		}
		#despliegalinks li a {
    		display: grid;
    		align-items: center;
    		justify-content: center;
    		width: 100%;
    		height: 140px;
    		padding: 10px 0;
    		border: 1px solid rgb(255 255 255/30%);
    		border-radius: 5pt;
    		position: relative;
    		box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    		background: rgba(0 0 0/3%);
    		color: #3C3C3B;
    		font-size: 15px;
    		font-weight: bolder;
    		text-align: center;
			text-decoration: none;
		}
		#despliegalinks li a:hover {
    		text-decoration: none;
    		background: rgba(0 0 0/5%);
    		color: #323232;
    		box-shadow: 0 0px 3px -1px rgb(0 0 0 / 17%), 0 1px 9px 1px rgb(0 0 0 / 15%);
		}
@media only screen and (max-width:380px) {
    .despliegaframes { 
    		grid-gap: 5px;
    		grid-template-columns: 1fr 1fr 1fr;
		}
	.despliegaframes li a {
    		min-height: 160px;
		}
	.despliegaframes img {
    		max-width: 60px;
		}
	.despliegaframes li a {
    		font-size: 7pt;
		}
}
@media only screen and (max-width:480px) {
    .despliegaframes { 
    		grid-gap: 5px;
    		grid-template-columns: 1fr 1fr 1fr;
		}
	.despliegaframes li a {
    		min-height: 160px;
		}
	.despliegaframes img {
    		max-width: 60px;
		}
	.despliegaframes li a {
    		font-size: 7pt;
		}
}
@media only screen and (max-width:740px) {
    .despliegaframes { 
    		grid-gap: 5px;
    		grid-template-columns: 1fr 1fr 1fr;
		}
	.despliegaframes li a {
    		min-height: 160px;
		}
	.despliegaframes img {
    		max-width: 60px;
		}
	.despliegaframes li a {
    		font-size: 7pt;
		}
}