/*<meta />*/

/* link to the Brand.css file */

@import url('Brand.css');

html.HomePage
{
	mc-master-page: url('../MasterPages/SideNav-Home.flmsp');
	padding: 0;
	box-sizing: border-box;
}

a.heading
{
	color: var(--brand);
}

a.heading:link
{
	color: var(--brand);
	text-decoration: none;
}

a.heading:visited
{
	color: var(--brand);
}

a.heading:hover
{
	color: #404040;
}

p.booktitle,
p.booksubtitle
{
	margin: 15px;
	font-size: 1.8em;
	line-height: 1.2em;
	color: var(--brand);
}

/* Styles for container */

.cards
{
	display: flex;
	flex-flow: row wrap;
	padding: 0 4px;
	align-content: flex-start;
}

/* Styles for card */

.card
{
	width: 250px;
	padding: 10px;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	top: 0;
	border: solid 1px var(--brand);
	border-top: solid 5px var(--brand);
	margin: 15px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
}

.card:hover
{
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card p
{
	
}

.card:hover h2
{
	color: #404040;
	box-shadow: 5px grey;
}

.card .content
{
	flex-grow: 1;
}

.card a footer
{
	display: block;
	margin-top: 15px;
	padding: 5px 10px;
	background: var(--brand);
	color: white;
	text-decoration: none;
	border: solid 1px white;
}

.card a footer:hover
{
	background: white;
	color: black;
	border: solid 1px var(--brand);
}

/*Responsive layout - adjusts width of card */

@media only screen and (max-width: 1279px)
{
	.card
	{
		width: 200px;
	}
}

/* Responsive layout - makes single column */

@media only screen and (max-width: 767px)
{
	.card
	{
		width: 100%;
	}
}