/* 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: 31.53%;  /* sets width of boxes */
	position: relative;
	margin: 0 .9% 25px .9%;
    box-shadow: #dedede 2px 4px 4px 0px;
	border-top: solid 1px #f5f5f5;
	border-left: solid 1px #f5f5f5;
	background-color: #ffffff;
	text-align: center;
	
}
/* Styles for showgroups.awp and subgroup.awp to show groups in a grid style.  Uses flexbox */

.grpImage 
{

}

.grpName /* Group Title and course count container */
{
	padding: 8px 8px 0 8px;
}

/*

.grpBox:nth-child(3n+1) > .grpName
{
	background-color: #b22222;
}

.grpBox:nth-child(3n+2) > .grpName
{
	background-color: #268c52;	
}

.grpBox:nth-child(3n+3) > .grpName
{
	background-color: #123456;
}


#OLIART
{
	background-color: #b22222;
}

#OLIFIN
{
	background-color: #123456;
}

#OLIHLW
{	
	background-color: #268c52;	
}

#OLISOC
{	
	background-color: #df7514;	
}

#OLITCH
{	
	background-color: #8d4e85;	
}

#OLITRV
{	
	background-color: #f2a400;	
}

*/

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

.grpNumber
{
	
}

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

.grpDesc /* group description container */ 
{
	padding: 0 8px;
}

.grpName a::after 
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}


 /* Responsive Break Points determine # of boxes in row. */
@media screen and (max-width: 800px) 
{
	.grpBox {flex-basis: 48%;}	
}

/* Responsive Break Points determine # of boxes in row. */
@media screen and (max-width: 600px) 
{
	.grpBox {flex-basis: 100%;}	
}