/*      MEDIA-QUERIES.CSS
        CSS Document        */

		@media only screen and (max-width: 400px)	{
			h2	{
				line-height: 90%;
				padding-bottom: 0;
			}
			div#content	{	grid-template-columns: repeat(2, 1fr);	}
			div.column	{
				grid-column: span 1;
				margin-bottom: 0.6em;
			}
			.two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve	{
				grid-column: 1 / -1 !important;
			}
		}

		@media only screen and (min-width: 401px) and (max-width: 500px)	{
			h2	{
				line-height: 90%;
				padding-bottom: 0;
			}
			div#content	{	grid-template-columns: repeat(3, 1fr);	}
			.two	{	grid-column: span 2;	}
			.three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve	{
				grid-column: 1 / -1;
			}
		}

		@media only screen and (min-width: 501px) and (max-width: 600px)	{
			h2	{
				line-height: 90%;
				padding-bottom: 0;
			}
			div#content	{	grid-template-columns: repeat(4, 1fr);	}
			.two	{	grid-column: span 2;	}
			.three	{	grid-column: span 3;	}
			.four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve	{
				grid-column: 1 / -1;
			}
		}

		@media only screen and (min-width: 601px) and (max-width: 800px)	{
			div#content	{	grid-template-columns: repeat(6, 1fr);	}
			.two	{	grid-column: span 2;	}
			.three	{	grid-column: span 3;	}
			.four	{	grid-column: span 4;	}
			.five	{	grid-column: span 5;	}
			.six, .seven, .eight, .nine, .ten, .eleven, .twelve	{
				grid-column: 1 / -1;
			}
		}

		@media only screen and (min-width: 801px)	{
			div#content	{
				grid-template-columns: repeat(12, 1fr);
				grid-gap: 1%;
			}
			.two	{	grid-column: span 2;	}
			.three	{	grid-column: span 3;	}
			.four	{	grid-column: span 4;	}
			.five	{	grid-column: span 5;	}
			.six	{	grid-column: span 6;	}
			.seven	{	grid-column: span 7;	}
			.eight	{	grid-column: span 8;	}
			.nine	{	grid-column: span 9;	}
			.ten	{	grid-column: span 10;	}
			.eleven	{	grid-column: span 11;	}
			.twelve	{	grid-column: 1 / -1;	}
		}

/*      End CSS Document    */