.screens {
	height: auto;
}
.gba{
	width: 480px;

	}
@media screen and (max-width: 480px){
	.gba{
	width: 240px;

	}
}

.pixel {
    image-rendering:optimizeSpeed;             /* Legal fallback */
    image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    image-rendering:crisp-edges;               /* CSS4 Proposed  */
    image-rendering:pixelated;                 /* CSS4 Proposed  */
    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}

.flex {
  display: flex;
  flex-flow: wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
  height:100%;

}

.full {
	width: 95vw;
	margin: auto;
}
.full img{
	max-width: 95vw;

}

.panel > *.color6 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(231,74,56,1) 20%, rgba(218,54,54,1) 60%);
				background-size: 128px 128px, auto;
			}
.panel > *.color7 {
	background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(42,38,87,1) 20%, rgba(156,159,182,1) 60% );
	background-size: 128px 128px, auto;
}

.panel.xlarge {
	width: 80rem;
	
}


		.panel.xlarge .span-0-25 {
			width: 2.5%;
		}

		.panel.xlarge .span-0-5 {
			width: 5%;
		}

		.panel.xlarge .span-0-75 {
			width: 7.5%;
		}

		.panel.xlarge .span-1 {
			width: 10%;
		}

		.panel.xlarge .span-1-25 {
			width: 12.5%;
		}

		.panel.xlarge .span-1-5 {
			width: 15%;
		}

		.panel.xlarge .span-1-75 {
			width: 17.5%;
		}

		.panel.xlarge .span-2 {
			width: 20%;
		}

		.panel.xlarge .span-2-25 {
			width: 22.5%;
		}

		.panel.xlarge .span-2-5 {
			width: 25%;
		}

		.panel.xlarge .span-2-75 {
			width: 27.5%;
		}

		.panel.xlarge .span-3 {
			width: 30%;
		}

		.panel.xlarge .span-3-25 {
			width: 32.5%;
		}

		.panel.xlarge .span-3-5 {
			width: 35%;
		}

		.panel.xlarge .span-3-75 {
			width: 37.5%;
		}

		.panel.xlarge .span-4 {
			width: 40%;
		}

		.panel.xlarge .span-4-25 {
			width: 42.5%;
		}

		.panel.xlarge .span-4-5 {
			width: 45%;
		}

		.panel.xlarge .span-4-75 {
			width: 47.5%;
		}

		.panel.xlarge .span-5 {
			width: 50%;
		}

		.panel.xlarge .span-5-25 {
			width: 52.5%;
		}

		.panel.xlarge .span-5-5 {
			width: 55%;
		}

		.panel.xlarge .span-5-75 {
			width: 57.5%;
		}

		.panel.xlarge .span-6 {
			width: 60%;
		}

		.panel.xlarge .span-6-25 {
			width: 62.5%;
		}

		.panel.xlarge .span-6-5 {
			width: 65%;
		}

		.panel.xlarge .span-6-75 {
			width: 67.5%;
		}

		.panel.xlarge .span-7 {
			width: 70%;
		}

		.panel.xlarge .span-7-25 {
			width: 72.5%;
		}

		.panel.xlarge .span-7-5 {
			width: 75%;
		}

		.panel.xlarge .span-7-75 {
			width: 77.5%;
		}

		.panel.xlarge .span-8 {
			width: 80%;
		}

		.panel.xlarge .span-8-25 {
			width: 82.5%;
		}

		.panel.xlarge .span-8-5 {
			width: 85%;
		}

		.panel.xlarge .span-8-75 {
			width: 87.5%;
		}

		.panel.xlarge .span-9 {
			width: 90%;
		}

		.panel.xlarge .span-9-25 {
			width: 92.5%;
		}

		.panel.xlarge .span-9-5 {
			width: 95%;
		}

		.panel.xlarge .span-9-75 {
			width: 97.5%;
		}


@media screen and (max-width: 736px) {

	.panel.xlarge {
	width: 100% !important;


		.panel.xlarge .span-10 {
			width: 100%;
		}

		.panel.xlarge .span-0-25 {
					width: 100%;
				}

				.panel.xlarge .span-0-5 {
					width: 100%;
				}

				.panel.xlarge .span-0-75 {
					width: 100%;
				}

				.panel.xlarge .span-1 {
					width: 100%;
				}

				.panel.xlarge .span-1-25 {
					width: 100%;
				}

				.panel.xlarge .span-1-5 {
					width: 100%;
				}

				.panel.xlarge .span-1-75 {
					width: 100%;
				}

				.panel.xlarge .span-2 {
					width: 100%;
				}

				.panel.xlarge .span-2-25 {
					width: 100%;
				}

				.panel.xlarge .span-2-5 {
					width: 100%;
				}

				.panel.xlarge .span-2-75 {
					width: 100%;
				}

				.panel.xlarge .span-3 {
					width: 100%;
				}

				.panel.xlarge .span-3-25 {
					width: 100%;
				}

				.panel.xlarge .span-3-5 {
					width: 100%;
				}

				.panel.xlarge .span-3-75 {
					width: 100%;
				}

				.panel.xlarge .span-4 {
					width: 100%;
				}

				.panel.xlarge .span-4-25 {
					width: 100%;
				}

				.panel.xlarge .span-4-5 {
					width: 100%;
				}

				.panel.xlarge .span-4-75 {
					width: 100%;
				}

				.panel.xlarge .span-5 {
					width: 100%;
				}

				.panel.xlarge .span-5-25 {
					width: 100%;
				}

				.panel.xlarge .span-5-5 {
					width: 100%;
				}

				.panel.xlarge .span-5-75 {
					width: 100%;
				}

				.panel.xlarge .span-6 {
					width: 100%;
				}

				.panel.xlarge .span-6-25 {
					width: 100%;
				}

				.panel.xlarge .span-6-5 {
					width: 100%;
				}

				.panel.xlarge .span-6-75 {
					width: 100%;
				}

				.panel.xlarge .span-7 {
					width: 100%;
				}

				.panel.xlarge .span-7-25 {
					width: 100%;
				}

				.panel.xlarge .span-7-5 {
					width: 100%;
				}

				.panel.xlarge .span-7-75 {
					width: 100%;
				}

				.panel.xlarge .span-8 {
					width: 100%;
				}

				.panel.xlarge .span-8-25 {
					width: 100%;
				}

				.panel.xlarge .span-8-5 {
					width: 100%;
				}

				.panel.xlarge .span-8-75 {
					width: 100%;
				}

				.panel.xlarge .span-9 {
					width: 100%;
				}

				.panel.xlarge .span-9-25 {
					width: 100%;
				}

				.panel.xlarge .span-9-5 {
					width: 100%;
				}

				.panel.xlarge .span-9-75 {
					width: 100%;
				}

				.panel.xlarge .span-10 {
					width: 100%;
				}
			}