/* Course Groups using Flexbox. 
* Images must be the same size.
* Flex-basis determines how many groups on a row, based on a percentage of 100 minus percentage for spacing between boxes. 
* E.g. for 3 per row, set flex-basis to 32.33 which leaves approximately 1% spacing between the boxes.  
* 
* Responsive Break points are also set in this style sheet 
*/

#grpContainer /* Flexbox container-all groups are in this container */
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.grpBox /* Group container. Flex-basis is set to determine # of boxes per row */
{
	flex-basis: 23.6%;  /* sets width of boxes */
	position: relative;
	margin: 0 .7% 25px .7%;
	box-sizing: border-box;
    box-shadow: #dedede 2px 4px 4px 0px;
	text-align: center;
	border-top: solid 1px #f5f5f5;
	border-left: solid 1px #f5f5f5;
	background-color: #ffffff;
	border-radius: 0 0 3px 3px;
}

.grpImage
{
}
	
.grpImage img
{
}

.grpName /* Group Title and course count container */
{
	box-sizing: border-box; 
	padding: 8px; 
}

.grpName p 
{
	line-height: 1.4;
	padding: 0;
}

.grpName a /* Group Title  */ 
{
	font-size: 120%; 
	text-decoration: none; 
	font-weight: bold;	
}

.groupCounter /* Course Counter */ 
{
	font-size: .8em;
}

.grpDesc /* group description container */ 
{
	box-sizing: border-box; 
	padding: 8px; 
	line-height: 1.5em;
}

/* stretches link over entire box */
.grpName a::after 
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

 /* Responsive Break Points determine # of boxes per row */
@media screen and (max-width: 768px) 
{	
	.grpBox 
	{
		flex-basis: 48%;
		margin: 0 1% 25px 1%;
	}	
}

/* Responsive Break Points determine # of boxes per row */
@media screen and (max-width: 600px) 
{
	.grpBox 
	{
		flex-basis: 98%;
		margin: 0 1% 25px 1%;
	}	
}