/*colors*/
/*gray: rgba(89, 81, 83, 1);*/
/*brown: rgba(166, 138, 123, 1);*/
/*tan: rgba(217, 185, 167, 1);*/
/*red: rgba(242, 31, 12, 1);*/
/*salmon: rgba(242, 69, 53);*/

/*index*/
*
{
	box-sizing: border-box;
}

html
{
	font-size: 62.5%;
}

body
{
	padding: 0;
	margin: 0;
	font-family: 'Josefin Sans', sans-serif;
}

#container
{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		'products'
		'colors'
		'footer';
	margin-top: 7rem;
}

#products
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	grid-template-areas:
		'title title . .'
		'mon mar mau sta'
		'etc por vig can'
		'. button button .';
	grid-gap: 5rem;
	padding: 8rem;
	min-height: 60vh;
	background: rgba(166, 138, 123, 1);
}

#products h1
{
	grid-area: title;
	font-size: 4.8rem;
	color: white;
	text-shadow: 0.4rem 0.4rem rgba(242, 69, 53);
	margin-bottom: 0;
}

.products-panel
{
	place-self: center;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		'img'
		'title';
	background: white;
	box-shadow: 1.4rem 1.4rem rgba(242, 69, 53);
	padding: 3rem;
	min-width: 30rem;
}

.products-panel img
{
	place-self: center;
	height: 15rem;
	width: auto;
}

.products-panel h3
{
	place-self: center;
	font-size: 2.4rem;
}


#monument-panel
{
	grid-area: mon;
}

#marker-panel
{
	grid-area: mar;
}

#mausoleum-panel
{
	grid-area: mau;
}

#statue-panel
{
	grid-area: sta;
}

#etching-panel
{
	grid-area: etc;
}

#porcelain-panel
{
	grid-area: por;
}

#vigil-panel
{
	grid-area: vig;
}

#candle-panel
{
	grid-area: can;
}

#products-button
{
	grid-area: button;
	place-self: center;
}

#colors
{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: auto;
	grid-template-areas:
		'title title . . . .'
		'c1 c2 c3 c4 c5 c6'
		'c7 c8 c9 c10 c11 c12'
		'c13 c14 c15 c16 c17 c18'
		'. . button button . .';
	grid-gap: 5rem;
	padding: 8rem;
	min-height: 60vh;
	background: rgba(217, 185, 167, 1);
}

#colors h1
{
	grid-area: title;
	font-size: 4.8rem;
	color: white;
	text-shadow: 0.4rem 0.4rem rgba(242, 69, 53);
}

.color-thumbnail
{
	height: 15rem;
	width: auto;
	opacity: 1;
	transition:
			all 270ms cubic-bezier(0.2, 0.1, 0.2, 1);
	border: 0.25rem solid white;
}

.color-thumbnail:hover
{
	opacity: 0.75;
	transition:
			all 270ms cubic-bezier(0.2, 0.1, 0.2, 1);
}

.color-link
{
	place-self: center;
	height:15rem;
	width: auto;
}

#c1
{
	grid-area: c1;
}

#c2
{
	grid-area: c2;
}

#c3
{
	grid-area: c3;
}

#c4
{
	grid-area: c4;
}

#c5
{
	grid-area: c5;
}

#c6
{
	grid-area: c6;
}

#c7
{
	grid-area: c7;
}

#c8
{
	grid-area: c8;
}

#c9
{
	grid-area: c9;
}

#c10
{
	grid-area: c10;
}

#c11
{
	grid-area: c11;
}

#c12
{
	grid-area: c12;
}

#c13
{
	grid-area: c13;
}

#c14
{
	grid-area: c14;
}

#c15
{
	grid-area: c15;
}

#c16
{
	grid-area: c16;
}

#c17
{
	grid-area: c17;
}

#c18
{
	grid-area: c18;
}

#colors-button
{
	grid-area: button;
	place-self: center;
}

#footer
{
	grid-area: footer;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	grid-template-areas:
		'hours nav info'
		'hours copy info';
	min-height: 17vh;
	background: rgba(89, 81, 83, 1);
	box-shadow: 0px 2px 10px rgba(58, 61, 63, 1);
}

.footer-panel
{
	place-self: center;
	font-size: 1.6rem;
	color: black;
}

#footer-navigation
{
	grid-area: nav;
	text-align: center;
}

#footer-hours
{
	grid-area: hours;
}

#footer-info
{
	grid-area: info;
	text-align: right;
}

#copyright
{
	grid-area: copy;
	text-align: center;
	font-size: 1.4rem;
}

.footer-panel a
{
	text-decoration: none;
}

.footer-panel a:link, a:visited
{
	color: black;
	transition:
			color 270ms cubic-bezier(0.2, 0.1, 0.2, 1);
}

.footer-panel a:hover, a:active
{
	color: rgba(166, 138, 123, 1);
	transition:
			color 270ms cubic-bezier(0.2, 0.1, 0.2, 1);
}

.footer-panel ul
{
	list-style-type: none;
}

.button
{
	font-size: 2rem;
	border: 0.3rem solid rgba(242, 69, 53);
	padding: 2rem;
	text-decoration: none;
	text-align: center;
	background: white;
	box-shadow: inset 0rem 0rem 0rem white;
}

a.button:link, a.button:visited
{
	color: black;
	transition:
			box-shadow 270ms cubic-bezier(.2, 0.1, .2, 1),
			color 270ms cubic-bezier(0.2, 0.1, 0.2, 1);
}

a.button:hover, a.button:active
{
	color: white;
	transition:
			box-shadow 270ms cubic-bezier(.2, 0.1, .2,1),
			color 270ms cubic-bezier(0.2, 0.1, 0.2, 1);
	box-shadow: inset 0 -100px rgba(242, 69, 53);
}

@media only screen and (max-width: 1050px)
{
	html
	{
		font-size: 58%;
	}

	#container
	{
		margin-top: 8rem;
	}

	#products
	{
		grid-template-columns: 1fr;
		grid-template-areas:
			'title'
			'mon'
			'mar'
			'mau'
			'sta'
			'etc'
			'por'
			'vig'
			'can'
			'button';
		grid-gap: 5rem;
		padding: 5rem;
		text-align: center;
	}

	#colors
	{
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			'title title'
			'c1 c2'
			'c3 c4'
			'c5 c6'
			'c7 c8'
			'c9 c10'
			'c11 c12'
			'c13 c14'
			'c15 c16'
			'c17 c18'
			'button button';
		grid-gap: 3rem;
		padding: 3rem;
	}

	#colors h1
	{
		text-align: center;
	}

	#footer
	{
		grid-template-columns: 1fr;
		grid-template-areas:
			'copy';
		min-height: 0;
		height: 10vh;
	}

	#footer-navigation
	{
		display: none;
	}

	#footer-hours
	{
		display: none;
	}

	#footer-info
	{
		display: none;
	}

	#copyright
	{
		justify-self: center;
	}
}