.container
{
	max-width: 1600px;
}

#tabContainerDiv
{
	display: inline-flex;
	box-sizing: border-box;
	width: 100%;
	flex-direction: row;
	align-items: center;
	flex-wrap: wreap;
	padding-top: 15px;
	border-top: 1px solid #999999;
	overflow: hidden;
	gap: 10px;
}

#groupCollectionContainerDiv
{
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 40px;
}

#buttonCreateGroup,
#buttonCreateGroup:active,
#buttonCreateGroup:link,
#buttonCreateGroup:visited,
#buttonCreateGroup:hover
{
	display: inline-block;
	padding: 8px;
	font-size: 10pt;
	font-family: avenir, helvetica, cabin, oswald, arial;
	word-spacing: 0px;
	color: #444444;
	text-shadow: none;
	border: 1px solid #999999;
	border-radius: 4px;
	line-height: 100%;
	flex-shrink: 0;
}  
     
#buttonCreateGroup:hover
{
	background-color: rgba(0,0,0,0.025);
	border: 1px solid #444444;
}

.groupCollectionDiv
{
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #CCCCCC;
	border: none;
}

.groupCollectionDiv:nth-of-type(n + 2)
{
	margin-top: 80px;
}

.groupCollectionName
{
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	padding-bottom: 10px;
	font-size: 20pt;
	font-family: montserratregular, arial;
	border-bottom: 2px solid #AAAAAA;
}

.groupCollectionSubtitle
{
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 10px;
	font-size: 11pt;
	font-family: avenir, montserratregular, arial;
}

.groupContainerDiv
{
	display: grid;
	box-sizing: border-box;
	width: 100%;
	margin-top: 20px;
	grid-template-columns: repeat(4, 1fr);		
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px;
}

.groupDiv
{
	display: inline-block;
	box-sizing: border-box;
	max-width: 600px;
	padding: 20px;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	text-align: left;
	background-color: #F5F5F5;
	box-shadow: 0px 12px 4px -4px rgba(0,0,0,0.05);
}

.groupTopDiv
{
	display: flex;
	box-sizing: border-box;
	width: 100%;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

.groupImage
{
	display: inline-block;
	box-sizing: border-box;
	width: 70px;
	height: auto;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	box-shadow: 0px 12px 4px -4px rgba(0,0,0,0.05);
}

.groupTopRightDiv
{
	display: inline-block;
	flex-grow: 2;
}

.groupName
{
	display: inline-block;	
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
	box-sizing: border-box;
	width: 100%;
	font-size: 11pt;
	font-family: montserratregular, avenir, arial;
	color: #444444;
	line-height: 120%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: wrap;
}

.groupNumMembers
{
	display: block;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: 10pt;
	font-family: avenir, arial;
	color: #444444;
	line-height: 100%;
}

.groupNumImages
{
	display: block;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: 10pt;
	font-family: avenir, arial;
	color: #444444;
	line-height: 100%;
}

.groupArtworkContainerDiv
{
	display: inline-grid;
	box-sizing: border-box;
	width: 100%;
	margin-top: 20px;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: 5px;
	border: none;
	
}

.groupArtwork
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
	background-color: #EEEEEE;
	box-shadow: 0px 8px 8px -5px rgba(0,0,0,0.20);
	
}

.groupArtwork[data-light-image='1']
{
	border: 1px solid rgba(0,0,0,0.10); 
}

.groupArtwork:nth-of-type(1)
{
	grid-row: span 2;
	grid-column: span 2;
} 	

.groupArtwork:nth-of-type(n + 8)
{
	display: none;
} 

.groupCollectionButtonContainerDiv
{
	display: inline-block;
	width: 100%;
	margin-top: 20px;
}

.groupTab,
.groupTab:active,
.groupTab:link,
.groupTab:visited,
.groupTab:hover
{
	display: inline-block;
	padding: 8px;
	font-size: 10pt;
	font-family: avenir, helvetica, cabin, oswald, arial;
	word-spacing: 0px;
	color: #444444;
	text-shadow: none;
	border: 1px solid #999999;
	border-radius: 4px;
	line-height: 100%;
	flex-shrink: 0;
}  
     
.groupTab:hover
{
	background-color: rgba(0,0,0,0.025);
	border: 1px solid #444444;
}

.groupTab.groupTabSelected
{
	padding: 7px;
	color: #FFFFFF;
	background-color: #444444;
	border: 2px solid #444444;
}



#tabSelectDiv
{
	display: none;
	width: 100%;
	text-align: center;
}

#tabSelect
{
	 display: inline-block;
	 box-sizing: border-box;
	 width: 100%;
	 /*max-width: 600px;*/
	 padding: 10px;
	 background-color: #FFFFFF;
	 border: 1px solid #AAAAAA;
	 border-radius: 0px;
	 font-size: 12pt;
	 font-family: cabin, oswald, arial;
	 color: #444444;
}

		 
#maindiv
{
	display: inline-block;
	width: 100%;
	text-align: justify;    
}

#groupnavigationleftdiv
{
	float: left;
}

#groupnavigationrightdiv
{
	float: right;
	font: 9pt arial;
	text-align: right;
}

#groupnavigationrightdiv p, #groupnavigationrightdiv a
{
	font: 9pt arial !important;
}

#grouph1div
{
	display: inline-block;
	vertical-align: middle;
	min-width: 300px;
}
	
#groupsearchdiv
{
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}
	
#groupcommunitydiv
{
	display: inline-block;
	vertical-align: middle;
	min-width: 250px;
	max-width: 300px;
}

#grouptitlebar > p
{
	float: left;
	font: 9pt arial;
	color: #FFFFFF;
}

.groupdiv > div
{
	float: left;
}

#grouptitlebar > p:nth-child(1), .groupdiv > div:nth-child(1)
{
	width: 12%;
	padding-right: 2%;
}

#grouptitlebar > p:nth-child(2), .groupdiv > div:nth-child(2)
{
	width: 40%;
	padding-right: 2%;
}

#grouptitlebar > p:nth-child(3), .groupdiv > div:nth-child(3)
{
	width: 10%;
	padding-right: 1%;
}

#grouptitlebar > p:nth-child(4), .groupdiv > div:nth-child(4)
{
	width: 10%;
	padding-right: 1%;
}

#grouptitlebar > p:nth-child(5), .groupdiv > div:nth-child(5)
{
	width: 20%;
}   

.groupdiv
{
	float: left;
	width: 100%;
	width: calc(100% - 50px);
	width: -webkit-calc(100% - 50px);
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 25px;
	padding-bottom: 25px;
	background-color: #FFFFFF;
	background-image: none;
	border-top: 1px solid #CCCCCC;
}

.groupdiv:first-child
{
	border-top: none;
}

.groupdiv:nth-child(2n)
{
	background-color: #F5F5F5;
	background-image: url('https://images.fineartamerica.com/public/assets/images/BackgroundTextureGray.gif');
}

.menunormal, .menunormal:link, .menunormal:visited, .menunormal:active
{
	display: inline-block;
	font-size: 11pt;
	font-family: helvetica, oswald, arial;
	color: #444444;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 15px;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}

.menuhighlighted, .menuhighlighted:link, .menuhighlighted:visited, .menuhighlighted:active
{
	border-bottom: 2px solid #999999;
}

.menunormal:hover
{
	border-bottom: 2px solid #58DBD7;
}

.groupcategorydiv
{
	float: left;
	width: 100%;
	padding-top: 25px;
	text-align: center;
}

.groupcategoryheaderdiv
{
	float: left;
	width: 100%;
	padding-bottom: 10px;
	border-bottom: 1px solid #CCCCCC;
}

.groupcategoryheaderdiv > p:nth-child(1)
{
	float: left;
	width: 100%;
	margin-bottom: 10px;
	font-size: 14pt;
	font-family: montserratregular, oswald, arial;
	color: #444444;
	text-transform: uppercase;
}

.groupcategoryheaderdiv > p:nth-child(2)
{
	float: left;
	width: 100%;
	padding-top: 0px;
	font: 9pt arial;
	color: #666666;
}

.groupcategorymessagediv
{
	float: left;
	width: 100%;
	padding-top: 7px;
	font: 9pt arial;
	color: #444444;
}

.groupcategorygroupcontainerdiv
{
	float: left;
	width: 100%;
	padding-top: 25px;
	text-align: center;
}

@media screen and (max-width: 1200px)
{   
	#maindiv
	{
		text-align: center;
	}
	
	#groupcommunitydiv
	{
		display: none;
	}
	
	#grouph1div, #groupsearchdiv
	{
		width: 100%;
		margin-bottom: 10px;
	}
	
	#grouptitlebar > p:nth-child(2), .groupdiv > div:nth-child(2)
	{
		width: 45%;
	}       
	
	#grouptitlebar > p:nth-child(3), .groupdiv > div:nth-child(3)
	{
		display: none;
	}

	#grouptitlebar > p:nth-child(4), .groupdiv > div:nth-child(4)
	{
		width: 15%;
	}       
	
}

@media screen and (max-width: 800px)
{
	#tabContainerDiv
	{
		display: none;
	}
	
	#tabSelectDiv
	{
		display: inline-block;
	}	
	
	#groupnavigationleftdiv
		{
		width: 100%;
		padding-bottom: 10px;
		text-align: center;
	}
	
	#groupnavigationrightdiv
		{
		width: 100%;
		text-align: center;
	}       
	
	#grouptitlebar > p:nth-child(1), .groupdiv > div:nth-child(1)
	{
		width: 15%;
		padding-right: 5%;
	}
	
	#grouptitlebar > p:nth-child(2), .groupdiv > div:nth-child(2)
	{
		width: 55%;
	}       

	#grouptitlebar > p:nth-child(4), .groupdiv > div:nth-child(4)
	{
		display: none;
	}

}

@media screen and (max-width: 600px)
{
	#grouptitlebar > p:nth-child(1), .groupdiv > div:nth-child(1)
	{
		width: 35%;
		padding-right: 5%;
	}
	
	#grouptitlebar > p:nth-child(2), .groupdiv > div:nth-child(2)
	{
		width: 60%;
		padding-right: 0%;
	}       

	#grouptitlebar > p:nth-child(5), .groupdiv > div:nth-child(5)
	{
		display: none;
	}

}    


.groupCollectionButton,
.groupCollectionButton:link,
.groupCollectionButton:active,
.groupCollectionButton:visited
{
    display: inline-block;
    padding: 15px;
    border: 1px solid #999999;
    font-size: 10pt;
    font-family: montserratregular, cabin, avenir;
    font-weight: normal;
    text-transform: uppercase;
    color: #444444;
    word-spacing: 2px;
}

.groupCollectionButton:hover
{
    border-color: #8DD4B3;
    background-color: #8DD4B3;
    color: #FFFFFF;
}

.groupCollectionDisplayCount
{
    display: inline-block;
    width: 100%;
    margin-top: 20px;
    font-size: 11pt;
    font-family: avenir, arial;
}

@media screen and (max-width: 800px)
{
    .groupCollectionButton,
	.groupCollectionButton:link,
	.groupCollectionButton:active,
	.groupCollectionButton:visited
    {
        padding: 8px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10pt;
        font-family: montserratregular, cabin, avenir;
    }
 
}