@charset "UTF-8";



/******** Organizational | Static Calendar Icon *******/

#calendaricon {
		
	--calendaricon-title-font-size:2rem;
	--calendaricon-title-font-weight:600;
	--calendaricon-title-font-color:#464646;
		
	--calendaricon-info-font-size:1.25rem;
	--calendaricon-info-font-weight:400;
	--calendaricon-info-font-color:#464646;	
		
	--calendaricon-background-color:rgb(240,240,240);
	--calendaricon-background:linear-gradient(to top, rgba(241, 241, 241, 1), rgba(255, 255, 255, 1) 92.86%);
	--calendaricon-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
		}
		
#calendaricon {
	/* background:var(--calendaricon-background-color); */
	/* background:var(--calendaricon-background); */
	/* box-shadow:var(--calendaricon-boxshadow); */
	/* border-radius: 1rem; */
	/* border-bottom: 2px solid #ffffff; */
	display: inline-block;
	}
		
.calendaricon-title {
	font-size:var(--calendaricon-title-font-size);
	font-weight:var(--calendaricon-title-font-weight);
	color:var(--calendaricon-title-font-color);
	}
		
.calendaricon-info {
	font-size:var(--calendaricon-info-font-size);
	font-weight:var(--calendaricon-info-font-weight);
	color:var(--calendaricon-info-font-color);
	}
		
#calendaricon .fa-icon {
	width: 2rem;
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.5rem;
	}			


/******** Organizational | Static Calendar Date *******/

#calendarday {
		
	--calendarday-title-font-size:2rem;
	--calendarday-title-font-weight:600;
	--calendarday-title-font-color:#464646;
		
	--calendarday-info-font-size:1.25rem;
	--calendarday-info-font-weight:400;
	--calendarday-info-font-color:#464646;	
		
	--calendarday-background-color:rgb(240,240,240);
	--calendarday-background:linear-gradient(to top, rgba(241, 241, 241, 1), rgba(255, 255, 255, 1) 92.86%);
	--calendarday-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
		}
		
#calendarday {
	background:var(--calendarday-background-color);
	background:var(--calendarday-background);
	box-shadow:var(--calendarday-boxshadow);
	border-radius: 1rem;
	border-bottom: 2px solid #ffffff;
	}
		
.calendarday-title {
	font-size:var(--calendarday-title-font-size);
	font-weight:var(--calendarday-title-font-weight);
	color:var(--calendarday-title-font-color);
	}
		
.calendarday-info {
	font-size:var(--calendarday-info-font-size);
	font-weight:var(--calendarday-info-font-weight);
	color:var(--calendarday-info-font-color);
	}
		
#calendarday .fa-icon {
	width: 2rem;
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.5rem;
	}			


			
/* simple accordion */

	#calendarday details {font-size: 1rem;}
	#calendarday details > * {padding: 0.75rem;}
	#calendarday summary {border-radius: 1rem; font-size: 1rem; font-family: sans-serif;
		font-weight: bold;color: #464646;cursor: pointer; position: relative;border-top: 3px solid #ffffff; 
		background: rgb(250, 250, 250); transition: all 0.3s ease-in-out;}	
	#calendarday summary:hover {}
	#calendarday summary::marker {content: "";}
	#calendarday summary::before {content:"";position:absolute;inset: .75rem;left: auto;aspect-ratio: 1;
		background: conic-gradient(from 90deg at 33% 33%, #0000 90deg, #cccccc 0) 100% 100%/60% 60%;clip-path: inset(1px);}
	#calendarday details[open] summary::before {background: linear-gradient(#cccccc 0 0) 50%/100% 25% no-repeat;}
	#calendarday details[open] summary {border-radius: 1rem 1rem 0 0;}
	#calendarday details > div {background: #ffffff;border-radius: 0 0 1rem 1rem;border-bottom: 3px solid white;
		border-left: 1px solid white;border-right: 1px solid white;}		
	
/*** end.contactcard ***/
	


/******** Organizational | Contact Card *******/



/* default */

#contact-card {
	
	--contactcard-primary-text-color:#464646;
	--contactcard-secondary-text-color:#888888;
	--contactcard-background:linear-gradient(to top, rgba(241, 241, 241, 1), rgba(255, 255, 255, 1) 92.86%); /* accent color */
	--contactcard-accent-border-bottom: 0.4rem solid #ffffff;
	
	--contactcard-accent-img-border:0.4rem solid #ffffff;
	--contactcard-img-box-shadow:0 -31px 37px -8px rgba(0, 0, 0, 0.1) inset, 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
	
	--contactcard-full-name-font-size:2rem;
	--contactcard-job-title-fontsize:1.75rem;
	--contactcard-job-team-fontsize:1.75rem;
	--contactcard-job-department-fontsize:1.75rem;
	--contactcard-pronouns-fontsize:1.25rem;
	--contactcard-optional-fontsize:1.75rem;
	
	--contactcard-full-name: var(--contactcard-primary-text-color);
	--contactcard-job-title-color:var(--contactcard-primary-text-color);
	--contactcard-job-team-color:var(--contactcard-primary-text-color);
	--contactcard-job-department-color:var(--contactcard-primary-text-color);
	--contactcard-pronouns-color:var(--contactcard-secondary-text-color);
	--contactcard-optional-color:var(--contactcard-primary-text-color);
	
	--contactcard-about-color:var(--contactcard-secondary-text-color);
	--contactcard-about-fontsize):3rem;
	
	--contactcard-background-color:rgb(240,240,240);
	--contactcard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
}

/* themes */

#contact-card-accent-mtsac-maroon {
	
	--contactcard-primary-text-color:#464646;
	--contactcard-secondary-text-color:#888888;
	--contactcard-background:linear-gradient(to top, rgba(156, 24, 47, 0.25), rgba(255, 255, 255, 1) 92.86%); /* accent color */
	--contactcard-accent-border-bottom: 0.4rem solid #9c182f;
	
	--contactcard-accent-img-border:0.4rem solid #ffffff;
	--contactcard-img-box-shadow:0 -31px 37px -8px rgba(0, 0, 0, 0.1) inset, 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
	
	--contactcard-full-name-font-size:2rem;
	--contactcard-job-title-fontsize:1.75rem;
	--contactcard-job-team-fontsize:1.75rem;
	--contactcard-job-department-fontsize:1.75rem;
	--contactcard-pronouns-fontsize:1.25rem;
	--contactcard-optional-fontsize:1.75rem;
	
	--contactcard-full-name: var(--contactcard-primary-text-color);
	--contactcard-job-title-color:var(--contactcard-primary-text-color);
	--contactcard-job-team-color:var(--contactcard-primary-text-color);
	--contactcard-job-department-color:var(--contactcard-primary-text-color);
	--contactcard-pronouns-color:var(--contactcard-secondary-text-color);
	--contactcard-optional-color:var(--contactcard-primary-text-color);
	
	--contactcard-about-color:var(--contactcard-secondary-text-color);
	--contactcard-about-fontsize):3rem;
	
	--contactcard-background-color:rgb(240,240,240);
	--contactcard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
}	

#contact-card-accent-flame-gold {
	
	--contactcard-primary-text-color:#464646;
	--contactcard-secondary-text-color:#888888;
	--contactcard-background:linear-gradient(to top, rgba(255, 205, 91, 0.25), rgba(255, 255, 255, 1) 92.86%); /* accent color */
	--contactcard-accent-border-bottom: 0.4rem solid #ffcd5b;
	
	--contactcard-accent-img-border:0.4rem solid #ffffff;
	--contactcard-img-box-shadow:0 -31px 37px -8px rgba(0, 0, 0, 0.1) inset, 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
	
	--contactcard-full-name-font-size:2rem;
	--contactcard-job-title-fontsize:1.75rem;
	--contactcard-job-team-fontsize:1.75rem;
	--contactcard-job-department-fontsize:1.75rem;
	--contactcard-pronouns-fontsize:1.25rem;
	--contactcard-optional-fontsize:1.75rem;
	
	--contactcard-full-name: var(--contactcard-primary-text-color);
	--contactcard-job-title-color:var(--contactcard-primary-text-color);
	--contactcard-job-team-color:var(--contactcard-primary-text-color);
	--contactcard-job-department-color:var(--contactcard-primary-text-color);
	--contactcard-pronouns-color:var(--contactcard-secondary-text-color);
	--contactcard-optional-color:var(--contactcard-primary-text-color);
	
	--contactcard-about-color:var(--contactcard-secondary-text-color);
	--contactcard-about-fontsize):3rem;
	
	--contactcard-background-color:rgb(240,240,240);
	--contactcard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
}	

#contact-card-accent-flame-orange {
	
	--contactcard-primary-text-color:#464646;
	--contactcard-secondary-text-color:#888888;
	--contactcard-background:linear-gradient(to top, rgba(245, 130, 90, 0.25), rgba(255, 255, 255, 1) 92.86%); /* accent color */
	--contactcard-accent-border-bottom: 0.4rem solid #f58232;
	
	--contactcard-accent-img-border:0.4rem solid #ffffff;
	--contactcard-img-box-shadow:0 -31px 37px -8px rgba(0, 0, 0, 0.1) inset, 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
	
	--contactcard-full-name-font-size:2rem;
	--contactcard-job-title-fontsize:1.75rem;
	--contactcard-job-team-fontsize:1.75rem;
	--contactcard-job-department-fontsize:1.75rem;
	--contactcard-pronouns-fontsize:1.25rem;
	--contactcard-optional-fontsize:1.75rem;
	
	--contactcard-full-name: var(--contactcard-primary-text-color);
	--contactcard-job-title-color:var(--contactcard-primary-text-color);
	--contactcard-job-team-color:var(--contactcard-primary-text-color);
	--contactcard-job-department-color:var(--contactcard-primary-text-color);
	--contactcard-pronouns-color:var(--contactcard-secondary-text-color);
	--contactcard-optional-color:var(--contactcard-primary-text-color);
	
	--contactcard-about-color:var(--contactcard-secondary-text-color);
	--contactcard-about-fontsize):3rem;
	
	--contactcard-background-color:rgb(240,240,240);
	--contactcard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
}	

#contact-card-accent-sienna-brown {
	
	--contactcard-primary-text-color:#464646;
	--contactcard-secondary-text-color:#888888;
	--contactcard-background:linear-gradient(to top, rgba(168, 86, 35, 0.25), rgba(255, 255, 255, 1) 92.86%); /* accent color */
	--contactcard-accent-border-bottom: 0.4rem solid #a85623;
	
	--contactcard-accent-img-border:0.4rem solid #ffffff;
	--contactcard-img-box-shadow:0 -31px 37px -8px rgba(0, 0, 0, 0.1) inset, 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
	
	--contactcard-full-name-font-size:2rem;
	--contactcard-job-title-fontsize:1.75rem;
	--contactcard-job-team-fontsize:1.75rem;
	--contactcard-job-department-fontsize:1.75rem;
	--contactcard-pronouns-fontsize:1.25rem;
	--contactcard-optional-fontsize:1.75rem;
	
	--contactcard-full-name: var(--contactcard-primary-text-color);
	--contactcard-job-title-color:var(--contactcard-primary-text-color);
	--contactcard-job-team-color:var(--contactcard-primary-text-color);
	--contactcard-job-department-color:var(--contactcard-primary-text-color);
	--contactcard-pronouns-color:var(--contactcard-secondary-text-color);
	--contactcard-optional-color:var(--contactcard-primary-text-color);
	
	--contactcard-about-color:var(--contactcard-secondary-text-color);
	--contactcard-about-fontsize):3rem;
	
	--contactcard-background-color:rgb(240,240,240);
	--contactcard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
}	

#contact-card-accent-light-mountain-blue {
	
	--contactcard-primary-text-color:#464646;
	--contactcard-secondary-text-color:#888888;
	--contactcard-background:linear-gradient(to top, rgba(50, 97, 149, 0.25), rgba(255, 255, 255, 1) 92.86%); /* accent color */
	--contactcard-accent-border-bottom: 0.4rem solid #326195;
	
	--contactcard-accent-img-border:0.4rem solid #ffffff;
	--contactcard-img-box-shadow:0 -31px 37px -8px rgba(0, 0, 0, 0.1) inset, 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
	
	--contactcard-full-name-font-size:2rem;
	--contactcard-job-title-fontsize:1.75rem;
	--contactcard-job-team-fontsize:1.75rem;
	--contactcard-job-department-fontsize:1.75rem;
	--contactcard-pronouns-fontsize:1.25rem;
	--contactcard-optional-fontsize:1.75rem;
	
	--contactcard-full-name: var(--contactcard-primary-text-color);
	--contactcard-job-title-color:var(--contactcard-primary-text-color);
	--contactcard-job-team-color:var(--contactcard-primary-text-color);
	--contactcard-job-department-color:var(--contactcard-primary-text-color);
	--contactcard-pronouns-color:var(--contactcard-secondary-text-color);
	--contactcard-optional-color:var(--contactcard-primary-text-color);
	
	--contactcard-about-color:var(--contactcard-secondary-text-color);
	--contactcard-about-fontsize):3rem;
	
	--contactcard-background-color:rgb(240,240,240);
	--contactcard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
}	


#contact-card-dark-mtsac-maroon {
	
	--contactcard-primary-text-color:#ffffff;
	--contactcard-secondary-text-color:#ffffff;
	--contactcard-background:linear-gradient(to top, rgba(103, 0, 17, 1), rgba(212, 0, 47, 1) 92.86%); /* accent color */
	--contactcard-accent-border-bottom: 0.4rem solid #9c182f;
	
	--contactcard-accent-img-border:0.4rem solid #9c192f;
	--contactcard-img-box-shadow:0 5px 5px 0 rgba(255, 0, 0, 0.8), 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
	
	--contactcard-full-name-font-size:2rem;
	--contactcard-job-title-fontsize:1.75rem;
	--contactcard-job-team-fontsize:1.75rem;
	--contactcard-job-department-fontsize:1.75rem;
	--contactcard-pronouns-fontsize:1.25rem;
	--contactcard-optional-fontsize:1.75rem;
	
	--contactcard-full-name: var(--contactcard-primary-text-color);
	--contactcard-job-title-color:var(--contactcard-primary-text-color);
	--contactcard-job-team-color:var(--contactcard-primary-text-color);
	--contactcard-job-department-color:var(--contactcard-primary-text-color);
	--contactcard-pronouns-color:var(--contactcard-secondary-text-color);
	--contactcard-optional-color:var(--contactcard-primary-text-color);
	
	--contactcard-about-color:var(--contactcard-secondary-text-color);
	--contactcard-about-fontsize):3rem;
	
	--contactcard-background-color:rgb(240,240,240);
	--contactcard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
}	

#contact-card-dark-mountain {
	
	--contactcard-primary-text-color:#ffffff;
	--contactcard-secondary-text-color:#ffffff;
	--contactcard-background:linear-gradient(to top, rgba(58, 59, 60, 1) 11.76%, rgba(152, 153, 155, 1) 92.86%); /* accent color */
	--contactcard-accent-border-bottom: 0.4rem solid #98999b;
	
	--contactcard-accent-img-border:0.4rem solid #98999b;
	--contactcard-img-box-shadow:0 5px 5px 0 rgba(191, 191, 191, 0.8), 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
	
	--contactcard-full-name-font-size:2rem;
	--contactcard-job-title-fontsize:1.75rem;
	--contactcard-job-team-fontsize:1.75rem;
	--contactcard-job-department-fontsize:1.75rem;
	--contactcard-pronouns-fontsize:1.25rem;
	--contactcard-optional-fontsize:1.75rem;
	
	--contactcard-full-name: var(--contactcard-primary-text-color);
	--contactcard-job-title-color:var(--contactcard-primary-text-color);
	--contactcard-job-team-color:var(--contactcard-primary-text-color);
	--contactcard-job-department-color:var(--contactcard-primary-text-color);
	--contactcard-pronouns-color:var(--contactcard-secondary-text-color);
	--contactcard-optional-color:var(--contactcard-primary-text-color);
	
	--contactcard-about-color:var(--contactcard-secondary-text-color);
	--contactcard-about-fontsize):3rem;
	
	--contactcard-background-color:rgb(240,240,240);
	--contactcard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
}	


#contact-card-dark-blue-mountain {
	
	--contactcard-primary-text-color:#ffffff;
	--contactcard-secondary-text-color:#ffffff;
	--contactcard-background:linear-gradient(to top, rgba(26, 54, 85, 1) 11.76%, rgba(50, 95, 146, 1) 92.86%); /* accent color */
	--contactcard-accent-border-bottom: 0.4rem solid #326195;
	
	--contactcard-accent-img-border:0.4rem solid #326195;
	--contactcard-img-box-shadow:0 5px 5px 0 rgba(73, 138, 209, 1), 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
	
	--contactcard-full-name-font-size:2rem;
	--contactcard-job-title-fontsize:1.75rem;
	--contactcard-job-team-fontsize:1.75rem;
	--contactcard-job-department-fontsize:1.75rem;
	--contactcard-pronouns-fontsize:1.25rem;
	--contactcard-optional-fontsize:1.75rem;
	
	--contactcard-full-name: var(--contactcard-primary-text-color);
	--contactcard-job-title-color:var(--contactcard-primary-text-color);
	--contactcard-job-team-color:var(--contactcard-primary-text-color);
	--contactcard-job-department-color:var(--contactcard-primary-text-color);
	--contactcard-pronouns-color:var(--contactcard-secondary-text-color);
	--contactcard-optional-color:var(--contactcard-primary-text-color);
	
	--contactcard-about-color:var(--contactcard-secondary-text-color);
	--contactcard-about-fontsize):3rem;
	
	--contactcard-background-color:rgb(240,240,240);
	--contactcard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
}	

#contact-card-accent-spectrum {
	
	--contactcard-primary-text-color:#464646;
	--contactcard-secondary-text-color:#888888;
	--contactcard-background:linear-gradient(to top, rgba(255, 255, 254, 0) 7.56%, rgba(254, 254, 255, 1) 13.03%, rgba(254, 251, 255, 1) 71.43%, rgba(255, 251, 255, 0.95) 98.74%), linear-gradient(to right, rgba(251, 42, 42, 1), rgba(255, 119, 0, 1), rgba(255, 213, 0, 1), rgba(187, 255, 0, 1), rgba(51, 255, 0, 1), rgba(0, 229, 255, 1), rgba(0, 136, 255, 1), rgba(0, 0, 255, 1), rgba(204, 0, 255, 1), rgba(255, 0, 119, 1), rgba(255, 0, 0, 1)); /* accent color */
	--contactcard-accent-border-bottom: 0 solid #ffffff;
	
	--contactcard-accent-img-border:0.4rem solid #ffffff;
	--contactcard-img-box-shadow:0 -31px 37px -8px rgba(0, 0, 0, 0.1) inset, 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
	
	--contactcard-full-name-font-size:2rem;
	--contactcard-job-title-fontsize:1.75rem;
	--contactcard-job-team-fontsize:1.75rem;
	--contactcard-job-department-fontsize:1.75rem;
	--contactcard-pronouns-fontsize:1.25rem;
	--contactcard-optional-fontsize:1.75rem;
	
	--contactcard-full-name: var(--contactcard-primary-text-color);
	--contactcard-job-title-color:var(--contactcard-primary-text-color);
	--contactcard-job-team-color:var(--contactcard-primary-text-color);
	--contactcard-job-department-color:var(--contactcard-primary-text-color);
	--contactcard-pronouns-color:var(--contactcard-secondary-text-color);
	--contactcard-optional-color:var(--contactcard-primary-text-color);
	
	--contactcard-about-color:var(--contactcard-secondary-text-color);
	--contactcard-about-fontsize):3rem;
	
	--contactcard-background-color:rgb(240,240,240);
	--contactcard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
}	

.contactcard-spectrum-bgnd {
	background: #ffffff;
border-radius: 0.6rem;
margin: 0rem -1rem -0.6rem -1rem;
padding-bottom: 1rem;
}


/* marketing colors

#9c182f Mt. SAC Maroon + linear-gradient(to top, rgba(156, 24, 47, 0.25), rgba(255, 255, 255, 1) 92.86%)
#ffcd5b Flame Gold
#f58232 Flame Orange + linear-gradient(to top, rgba(245, 130, 90, 0.25), rgba(255, 255, 255, 1) 92.86%)
#a85623 Sienna Brown
#326195 Light Mountain Blue  + linear-gradient(to top, rgba(50, 97, 149, 0.25), rgba(255, 255, 255, 1) 92.86%)

border: 0.4rem solid #336195;
box-shadow: 0 5px 5px 0 rgba(57, 145, 246, 1), 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
background: linear-gradient(to top, rgba(10, 18, 44, 1) 11.76%, rgba(51, 97, 149, 1) 92.86%);

#97999b Light Mountain Gray 
border: 0.4rem solid #98999b;
box-shadow: 0 5px 5px 0 rgba(191, 191, 191, 1), 0 -4px 4px -1px rgba(0, 0, 0, 0.25);

border: 0.4rem solid #97999b;
background: linear-gradient(to top, rgba(58, 59, 60, 1) 11.76%, rgba(152, 153, 155, 1) 92.86%);

#4a4f55 Charcoal Mountain

*/

/* rename to old on launch */

#OLDcontact-card {
					
	/* Profile Picture */
			
	--contactcard-accent-color: #f58232;
	--contactcard-full-name: #464646;
	--contactcard-full-name-font-size:2rem;
	--contactcard-job-title-color:#464646;
	--contactcard-job-title-fontsize:1.75rem;
	--contactcard-job-team-color:#464646;
	--contactcard-job-team-fontsize:1.75rem;
	--contactcard-job-department-color:#464646;
	--contactcard-job-department-fontsize:1.75rem;
	--contactcard-pronouns-color:#888888;
	--contactcard-pronouns-fontsize:1.25rem;
	--contactcard-optional-color:#464646;
	--contactcard-optional-fontsize:1.75rem;
	
	--contactcard-about-color:#888888;
	--contactcard-about-fontsize):3rem;
			
	--contactcard-background-color:rgb(240,240,240);
	--contactcard-background:linear-gradient(to top, rgba(241, 241, 241, 1), rgba(255, 255, 255, 1) 92.86%);
	--contactcard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
	}
			
.hide {display:none}
		
.contactcard {
	display:block;
	min-height: 5rem;
	padding: 1rem;
	margin: 2rem 0.5rem;
	border-radius: 1rem;
	border-bottom: var(--contactcard-accent-border-bottom);
	background:var(--contactcard-background-color);
	background:var(--contactcard-background);
	box-shadow:var(--contactcard-boxshadow);
	}	

#contact-card .contactcard, 
#contact-card-accent-mtsac-maroon .contactcard, 
#contact-card-accent-flame-orange .contactcard,
#contact-card-accent-flame-gold .contactcard,
#contact-card-accent-sienna-brown .contactcard,
#contact-card-accent-light-mountain-blue .contactcard, 
#contact-card-dark-mtsac-maroon .contactcard,
#contact-card-dark-mountain .contactcard,
#contact-card-dark-blue-mountain .contactcard {
	display:block;
	min-height: 5rem;
	padding: 1rem;
	margin: 2rem 0.5rem;
	border-radius: 1rem;
	border-bottom: var(--contactcard-accent-border-bottom);
	background:var(--contactcard-background-color);
	background:var(--contactcard-background);
	box-shadow:var(--contactcard-boxshadow);
	}	

/* future variation with gradient background */
.contactcard-title-background {
	background: #ffffff;
	border-radius: 1rem;
	margin: 1rem -0.9rem 0 -0.9rem;
}
			
/* .contactcard-img {
	display: block;
	border-radius: 20rem;
	border: 0.2rem solid #ffffff;
	width: 10rem;
	height: 10rem;		
	background-color:#ffffff;
	margin: -2rem auto 0.5rem auto;
	box-shadow: 0 -31px 37px -8px rgba(0, 0, 0, 0.1) inset, 0 -4px 4px -1px rgba(0, 0, 0, 0.25);
	transition: all 0.3s ease-in-out;
	transform: scale(1);	
	transform-origin: bottom;
	}
			
.contactcard-img:hover {
			transform: scale(1.3);
			}

*/

/* NEW July 3 */
.contactcard-img {
display: block;
border-radius: 20rem;
border: var(--contactcard-accent-img-border);
width: 10rem;
height: 10rem;
background-color: #ffffff;
margin: -2rem auto 0.5rem auto;
box-shadow: var(--contactcard-img-box-shadow);
transition: all 0.3s ease-in-out;
transform: scale(1);
transform-origin: bottom;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}

.contactcard-img:hover {
			transform: scale(1.3);
			}

	
.contactcard-fullname {
		display:block;
		font-size:var(--contactcard-full-name-font-size);
		font-weight: 900;
		color: var(--contactcard-full-name);
		line-height: 2rem;
		
		}

.contactcard-title {
		display:block;
		font-weight: 600;
		line-height: 1.75rem;
		font-size: var(--contactcard-job-title-fontsize);
		font-style: oblique;
		color:var(--contactcard-job-title-color);
		margin-top: 0.5rem;
		}
			
			
			
.contactcard-team {
		display:block;
		font-weight: 600;
		line-height: 1.75rem;
		font-size: var(--contactcard-job-team-fontsize);
		color:var(--contactcard-job-team-color);
		margin-top: 1rem;
		}
			
			
.contactcard-department {
		display:block;
		font-weight: 600;
		line-height: 1.75rem;
		font-size: var(--contactcard-job-department-fontsize);
		color:var(--contactcard-job-department-color);
		}			
			
.contactcard-pronouns {
		display:block;
		font-weight: 300;
		font-size: var(--contactcard-pronouns-fontsize);
		font-style: oblique;
		color:var(--contactcard-pronouns-color);
		margin-top: 1rem;
			}			

.contactcard-optional {
		display:block;
		font-weight: 300;
		font-size: var(--contactcard-optional-fontsize);
		color:var(--contactcard-optional-color);
		margin-top: 2rem;
			}			
		
			
.connect, .office {
			border-radius:1rem;
			background-color:#ffffff;
			padding: 0.5rem;
			margin:1rem 0;
			}			
			
		
.contactcard-fa-icon {
	width: 2rem;
	text-align: center;
	font-size: 1.25rem;
	line-height: 2.25rem;
	margin-right: 0.5rem;
	}			
			
			
			
#mapthumbnail {
			border-radius:1rem; 
			background-color:#ffffff;
			/* border: 3px solid #ffffff; */
			margin:1rem 0;
			/* box-shadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25); */
			}			
			
.overview p {
		font-weight: 300;
		font-size:2rem;
		color:var(--contactcard-overview-color);
		line-height: 2rem;
			font-style: oblique;			
			}	


/* simple accordion */
	
#contact-card details > *, 
#contact-card-accent-mtsac-maroon details > *, 
#contact-card-accent-flame-orange details > *, 
#contact-card-accent-flame-gold details > *,
#contact-card-accent-sienna-brown details > *,
#contact-card-accent-light-mountain-blue details > *, 
#contact-card-dark-mtsac-maroon details > *,
#contact-card-dark-mountain details > *,
#contact-card-dark-blue-mountain details > * {padding: 0.75rem; }

#contact-card details, 
#contact-card-accent-mtsac-maroon details, 
#contact-card-accent-flame-orange details,
#contact-card-accent-flame-gold details,
#contact-card-accent-sienna-brown details,
#contact-card-accent-light-mountain-blue details, 
#contact-card-dark-mtsac-maroon details,
#contact-card-dark-mountain details,
#contact-card-dark-blue-mountain details {
font-size: 1rem;
font-size: 1rem;
background-color: #ffffff;
margin: 1rem -2rem -1rem -2rem;
border-radius: 1rem;
}

#contact-card summary, 
#contact-card-accent-mtsac-maroon summary, 
#contact-card-accent-flame-orange summary,
#contact-card-accent-flame-gold summary,
#contact-card-accent-sienna-brown summary,
#contact-card-accent-light-mountain-blue summary, 
#contact-card-dark-mtsac-maroon summary,
#contact-card-dark-mountain summary,
#contact-card-dark-blue-mountain summary {
	border-radius: 1rem; 
	font-size: 1rem; 
	font-family: sans-serif;
	font-weight: bold; 
	color: #464646;cursor: pointer; 
	position: relative;
	border-top: 3px solid #ffffff; 
	background: rgb(250, 250, 250); 
	transition: all 0.3s ease-in-out;}

#contact-card summary:hover, 
#contact-card-accent-mtsac-maroon summary:hover, 
#contact-card-accent-flame-orange summary:hover, 
#contact-card-accent-flame-gold summary:hover,
#contact-card-accent-sienna-brown summary:hover,
#contact-card-accent-light-mountain-blue summary:hover, 
#contact-card-dark-mtsac-maroon summary:hover,
#contact-card-dark-mountain summary:hover,
#contact-card-dark-blue-mountain summaey:hover {}

#contact-card summary::marker, 
#contact-card-accent-mtsac-maroon summary::marker, 
#contact-card-accent-flame-orange summary::marker,
#contact-card-accent-flame-gold summary::marker,
#contact-card-accent-sienna-brown summary::marker,
#contact-card-accent-light-mountain-blue summary::marker, 
#contact-card-dark-mtsac-maroon summary::marker,
#contact-card-dark-mountain summary::marker,
#contact-card-dark-blue-mountain summary::marker {content: "";}


#contact-card summary::before, 
#contact-card-accent-mtsac-maroon summary::before, 
#contact-card-accent-flame-orange summary::before,
#contact-card-accent-flame-gold summary::before,
#contact-card-accent-sienna-brown summary::before,
#contact-card-accent-light-mountain-blue summary::before, 
#contact-card-dark-mtsac-maroon summary::before,
#contact-card-dark-mountain summary::before,
#contact-card-dark-blue-mountain summary::before {
	content:"";position:absolute;inset: .75rem;
	left: auto;aspect-ratio: 1;
	background: conic-gradient(from 90deg at 33% 33%, #0000 90deg, #cccccc 0) 100% 100%/60% 60%;
	clip-path: inset(1px);}

#contact-card details[open] summary::before, 
#contact-card-accent-mtsac-maroon details[open] summary::before, 
#contact-card-accent-flame-orange details[open] summary::before, 
#contact-card-accent-flame-gold details[open] summary::before,
#contact-card-accent-sienna-brown details[open] summary::before,
#contact-card-accent-light-mountain-blue details[open] summary::before, 
#contact-card-dark-mtsac-maroon details[open] summary::before,
#contact-card-dark-mountain details[open] summary::before,
#contact-card-dark-blue-mountain details[open] summary::before {
	background: linear-gradient(#cccccc 0 0) 50%/100% 25% no-repeat;}


#contact-card details[open] summary, 
#contact-card-accent-mtsac-maroon details[open] summary,
#contact-card-accent-flame-orange details[open] summary, 
#contact-card-accent-flame-gold details[open] summary,
#contact-card-accent-sienna-brown details[open] summary,
#contact-card-accent-light-mountain-blue details[open] summary, 
#contact-card-dark-mtsac-maroon details[open] summary,
#contact-card-dark-mountain details[open] summary,
#contact-card-dark-blue-mountain details[open] summary {border-radius: 1rem 1rem 0 0;}

#contact-card details > div, 
#contact-card-accent-mtsac-maroon details > div, 
#contact-card-accent-flame-orange details > div, 
#contact-card-accent-flame-gold details > div,
#contact-card-accent-sienna-brown details > div,
#contact-card-accent-light-mountain-blue details > div, 
#contact-card-dark-mtsac-maroon details > div,
#contact-card-dark-mountain details > div,
#contact-card-dark-blue-mountain details > div {
	border-radius: 0 0 1rem 1rem;
	border-bottom: 3px solid white;
	border-left: 1px solid #ffffff; 
	border-right: 1px solid #ffffff; 
	min-height:2rem; padding: 2rem 1rem;
}	
		
		.contactcard-detailtext {padding:1rem;}

@media only screen and (max-width: 50em) {}

/*** end.contactcard ***/





/******** Organizational | Quotebox *******/


#quotebox-colors-light-mtsac-maroon {
	--quotebox-accent-color: #9c182f; 
	--quotebox-quotation-text: #464646;
	--quotebox-hyphen:#9e1b2a;
	--quotebox-author-name: #464646;
	--quotebox-author-title:#888888;
	--quotebox-background-color: #fbfbfb;
	--quotebox-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
	}
			
#quotebox-colors-light-flame-orange {
	--quotebox-accent-color: #f58232; 
	--quotebox-quotation-text: #464646;
	--quotebox-hyphen:#9e1b2a;
	--quotebox-author-name: #464646;
	--quotebox-author-title:#888888;
	--quotebox-background-color: #fbfbfb;
	--quotebox-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
	}
			
#quotebox-colors-light-mountain-blue {
	--quotebox-accent-color: #326195; 
	--quotebox-quotation-text: #464646;
	--quotebox-hyphen:#9e1b2a;
	--quotebox-author-name: #464646;
	--quotebox-author-title:#888888;
	--quotebox-background-color: #fbfbfb;
	--quotebox-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
	}
		
#quotebox-colors-dark-mtsac-maroon {
	--quotebox-accent-color: #9c182f; 
	--quotebox-quotation-text: #f5f5f5;
	--quotebox-hyphen:#9e1b2a;
	--quotebox-author-name: #ffffff;
	--quotebox-author-title:#f5f5f5;
	--quotebox-background-color: #464646;
	--quotebox-boxshadow:none;
	}	
			
#quotebox-colors-dark-flame-orange {
	--quotebox-accent-color: #f58232; 
	--quotebox-quotation-text: #f5f5f5;
	--quotebox-hyphen:#9e1b2a;
	--quotebox-author-name: #ffffff;
	--quotebox-author-title:#f5f5f5;
	--quotebox-background-color: #464646;
	--quotebox-boxshadow:none;
	}		

#quotebox-colors-dark-mountain-blue {
	--quotebox-accent-color: #326195; 
	--quotebox-quotation-text: #f5f5f5;
	--quotebox-hyphen:#9e1b2a;
	--quotebox-author-name: #ffffff;
	--quotebox-author-title:#f5f5f5;
	--quotebox-background-color: #464646;
	--quotebox-boxshadow:none;
	}		

#quotebox-colors-dark-maroon-flame-orange {
--quotebox-accent-color: #f58232;
--quotebox-quotation-text: #f5f5f5;
--quotebox-hyphen: #9e1b2a;
--quotebox-author-name: #ffffff;
--quotebox-author-title: #f5f5f5;
--quotebox-background-color: #9c182f;
--quotebox-boxshadow: none;
}

#quotebox-colors-dark-charcoal-light-mountain {
			--quotebox-accent-color: #97999b;
--quotebox-quotation-text: #f5f5f5;
--quotebox-hyphen: #9e1b2a;
--quotebox-author-name: #ffffff;
--quotebox-author-title: #f5f5f5;
--quotebox-background-color: #4a4f55;
--quotebox-boxshadow: none;
}
			
#quotebox-colors-dark-deep-light-mountain {
	--quotebox-accent-color: #326195;
--quotebox-quotation-text: #f5f5f5;
--quotebox-hyphen: #9e1b2a;
--quotebox-author-name: #ffffff;
--quotebox-author-title: #f5f5f5;
--quotebox-background-color: #0b122c;
--quotebox-boxshadow: none;
}


@media only screen and (max-width: 50em) {
	.position-left30, .position-left70, .position-right30, .position-right70, .position-center70 {
	float:none !important; margin: 2rem auto !important; width: 100% !important; border-left: 5px solid var(--quotebox-accent-color)!important; border-right: none !important; }}
	
	
@media only screen and (min-width: 76em) {
		.position-left30, .position-left70 {
			margin: 0.75rem 2rem 0.75rem -2rem!important; 
			transition: all 0.5s ease; }
		
		.position-right30, .position-right70 {
			margin: 0.75rem -2rem 0.75rem 2rem!important; 
			transition: all 0.5s ease; }
		} 


	/* Size and Position - float: left/right/none - width: 30/70/100 */
			
	.position-left30 {
		float:left;
		margin: 0.75rem 2rem 0.75rem 0rem; 
		width: 30%; 
		border-left: 5px solid var(--quotebox-accent-color);
		}
	.position-left70 {
		float:left;
		margin: 0.75rem 2rem 0.75rem 0rem; 
		width: 70%; 
		border-left: 5px solid var(--quotebox-accent-color);
		}
	.position-center70 {
		float:none;
		margin: 2rem auto; 
		width: 70%; 
		border-right: 5px solid var(--quotebox-accent-color);
		}
	.position-center100 {
		float:none;
		margin: 2rem auto; 
		width: 100%; 
		border-right: 5px solid  var(--quotebox-accent-color);
		}	
	.position-right30 {
		float:right; 
		margin: 0.75rem 0 0.75rem 2rem; 
		width: 30%; 
		border-right: 5px solid  var(--quotebox-accent-color);
		}
	.position-right70 {
		float:right;
		margin: 0.75rem 0 0.75rem 2rem; 
		width: 70%; 
		border-right: 5px solid  var(--quotebox-accent-color);
		}
		






/* Quotation */
			
	.quotebox {
		padding: 1rem;
		border-radius: 0.5rem;
		background-color: var(--quotebox-background-color);
		box-shadow:var(--quotebox-boxshadow);
		}
			
	.quotebox p {
		color: var(--quotebox-quotation-text);
		font-size: 1.2rem;
		font-style: oblique;
		margin-bottom:0;
		}
			
/* Quote Mark */	
			
	.quotebox::before {
		content: "“";
		color: var(--quotebox-accent-color);
		font-size: 6rem;
		line-height: 1rem;
		position: absolute;
		margin: -0.1rem 0;
		}

	.quote-attribution {
		margin-top: 0.5rem;
		margin-left:1rem
		}
			
	.quote-hyphen {
		font-weight: 900;
		margin-left: -0.5rem;
		color: var(--quotebox-accent-color);
		} 
			
	/* Quote Author */
			
	.author-name {
		font-size: 1.2rem;
		font-weight: 900;
		color: var(--quotebox-author-name);
		}

	/* Quote Author's Title */
			
	.author-title {
		display:block;
		font-weight: 300;
		font-size: 1rem;
		font-style: oblique;
		color: var(--quotebox-author-title);
		margin-left: 0.5rem;
		margin-top: -0.5rem;
		}
				
/*** end.quotebox ***/


/******** Animated Stats Numbers *******/

.counters {
	display: flex;
	background: rgba($white, 0.75);
	padding: 20px;
	border-radius: 10px;
	box-shadow: 5px 5px 20px rgba($black, 0.2);
}		

.counter {
	letter-spacing: 3px;
	line-height: 1;
	position: relative;
	display: flex;
	overflow: hidden;
	align-items: center;
	height: 5.6rem; /* 3.6rem */
	font-size: 5rem; /* 3rem */
	margin-bottom: 1rem;
	font-weight: 600; /* 400 */
	left: 24%;
	& > span {
		z-index: 1;
		display: flex;
		flex-direction: column;
		height: 100%;
		transition: transform 2s ease;
		transform: translateY(0);
		line-height: 1;
		span {
			flex: 0 0 100%;
			height: 100%;
		}
	} 


	$d: 0;
	$inc: 0.375;
	@for $i from 1 through 20 {
		&;:nth-child(#{$i}) > span {
			transition-delay: #{$d * 1s};
		}
		$d: $d + $inc;
	}
}


/*** end.stats number ***/



/******** Organizational | Tabs *******/  
			
			
	#tabcomponent .tabs { margin-bottom: 5px !important; }		
	#tabcomponent .tabs-content { margin-bottom: 0 !important;}
	#tabcomponent .tabs dd > a, #tabcomponent .tabs .tab-title > a {}			

	#tabcomponent .tabs dd, #tabcomponent .tabs .tab-title {
		float: left;
		margin-left: 0.2rem;
		width: auto;
	}

	#tabcomponent .tabs {
		background: rgb(240,240,240);
		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 92.86%),
		linear-gradient(to top, rgba(0, 0, 0, 0.23), rgba(0, 0, 0, 0) 85.29%);
		border-radius:  0 0 10px 10px;}			


	#tabcomponent .tabs dd > a, #tabcomponent .tabs .tab-title > a {
		text-decoration: none;
		color: #000000;
		padding: .25rem 1rem;
		font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
		font-size: 1rem;
		margin: 0 2px 0 2px;
		border-radius: 10px 10px 0 0;
		background: rgb(240,240,240);
		background-color: linear-gradient(to top, rgb(212, 212, 212), rgba(230, 230, 230, 1) 19.33%);
		color: #222222;
		box-shadow: 0 -2px 5px -2px rgba(0, 0, 0, 0.34);
		border-top: 2px solid white;
	}

	#tabcomponent .tabs dd > a:hover, #tabcomponent .tabs .tab-title > a:hover {
		background-color: #464646;
		color: #FFFFFF;
		border-radius: 10px 10px 0 0;
		margin: 0 2px 0 2px;
		box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.77);
		border-top: 2px solid rgb(152, 152, 152);
	}

	#tabcomponent .tabs dd.active a, #tabcomponent .tabs .tab-title.active a {
		background: rgb(240,240,240);
		background: linear-gradient(rgba(240, 240, 240, 1), rgba(255, 255, 255, 1) 17%);
		color: #222222;
		box-shadow: 0 -3px 3px -3px rgba(0, 0, 0, 0.47);
		border-top: 2px solid white;
	}

	#tabcomponent .tabs-content > .content.active {
		display: block;
		
		margin-top: -5px;
		border-top: 3px solid #ffffff;
		
		min-height: 5rem;
		float: none;
		padding: 1rem;
		border-bottom: 2px solid #ffffff;
		box-shadow: 0 10px 7px -13px rgba(0, 0, 0, 1);
		border-radius: 0 0.5rem 0.5rem 0.5rem;
		background: rgb(240,240,240);
		/* background: linear-gradient(to top, rgba(241, 241, 241, 1), rgba(255, 255, 255, 1) 92.86%); */
		background: linear-gradient(to top, rgba(241, 241, 241, 1), rgb(248, 248, 248) 22.27%);
	}

#tabcomponent .purpletab {background: linear-gradient(rgba(85, 0, 254, 0.5), rgba(205, 183, 255, 0.4))}

	
	@media only screen and (max-width: 40em) { 
		#tabcomponent .tabs dd, #tabcomponent .tabs .tab-title {
			width: 100%
		}
	} 

 
/*end of mobile stacking max-width 40em */

	/******** Magazine Full-Width Image *******/  		
	
			.full-img {
			max-width: 100vw;
			width: 100vw;
			position: relative;
			left: calc(-50vw + 50%);
			}

			.full-caption {
			max-width: 100vw;
			width: 100vw;
			position: relative;
			left: calc(-50vw + 50%);
			margin: 0 -2rem;
			}

	/*** End Magazine Full-Width Image ***/


/******** Organizational Notes *******/  	

.notecomponent {
display: block;
background-color: #fafafa;
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid #dddddd;
box-shadow: 0 3px 3px rgba(220, 220, 220, 0.3);
margin: 0.25rem 0rem 2rem 0rem;
}

/*** End Organizational Notes ***/  


/******** Campus Map Static *******/  


#campusmap-component {
display: block;
background-color: #fafafa;
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid #dddddd;
box-shadow: 0 3px 3px rgba(220, 220, 220, 0.3);
margin: 0.25rem 0rem 2rem 0rem;
}



	/*** End Campus Map ***/  	



/******** Organizational |  Committee Minutes *******/  

#minutescard {
 	--minutescard-background:linear-gradient(to top, rgba(241, 241, 241, 1), rgba(255, 255, 255, 1) 92.86%);
	--minutescard-boxshadow:0 10px 10px -10px rgba(0,0,0,0.25), 0 0 3px 0 rgba(0,0,0,0.25);
	}

	/* Container Card */

.minutescard {
	display:block;
	border-bottom: 2px solid #ffffff;
	padding: 0.5rem 0.25rem 1rem 0.5rem;
	margin: 1rem 0 1rem 0;
	border-radius: 0.5rem;
	background: var(--minutescard-background);
	box-shadow: var(--minutescard-boxshadow);
}
	/* Container for scrolling content */

.minutescard-scrollbox {
	height: 40vh; /* 450px */
	min-height: 40vh;
	padding: 1rem 0.25rem 2rem 0;
	overflow-y: auto;
	overflow-x: hidden;
	resize: vertical;
	margin: 0 0 1rem 0;
	width: 100%;
	mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
}

.minutescard-scrollbox > ul {list-style-type: disc;}
.minutescard-scrollbox > ul > li > ul {list-style-type: disc;}
.minutescard-scrollbox > ul > li > ul > li::marker {color: #9e9e9e}


	/*** End Organizational | Committee Minutes ***/  


/******** Organizational |  Image Captions *******/  

#figcomponent-left > figure {
	float: left;
	display: inline-block;
	border-radius: 1rem;
	border-bottom: 3px solid #ffffff;
	padding: 1rem;
	margin: 5.5rem 2rem 1rem 0rem;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 10px -10px, rgba(0, 0, 0, 0.25) 0px 0px 3px 0px;
	background: linear-gradient(to top, rgb(241, 241, 241), rgb(255, 255, 255) 92.86%);
	transition: all 0.5s ease;
}

#figcomponent-left img {
	border: 3px solid #ffffff;
	box-shadow: 6px 6px 24px 1px rgba(0, 0, 0, 0.42), 0 0 10px 0 rgba(0, 0, 0, 0);
	border-radius: 1rem;
	margin: -5.5rem 0rem 2rem 0rem; 
}

#figcomponent-right > figure {
	float: right;
	display: inline-block;
	border-radius: 1rem;
	border-bottom: 3px solid #ffffff;
	padding: 1rem;
	margin: 5.5rem 0rem 1rem 2rem;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 10px -10px, rgba(0, 0, 0, 0.25) 0px 0px 3px 0px;
	background: linear-gradient(to top, rgb(241, 241, 241), rgb(255, 255, 255) 92.86%);
	transition: all 0.5s ease;
}

#figcomponent-right img {
	border: 3px solid #ffffff;
	box-shadow: 6px 6px 24px 1px rgba(0, 0, 0, 0.42), 0 0 10px 0 rgba(0, 0, 0, 0);
	border-radius: 1rem;
	margin: -5.5rem 0rem 2rem 0rem; 
}
		
#figcomponent figure figcaption {}

.figcomponent-100 {width: 100%} 
.figcomponent-200px {width: 200px} 
.figcomponent-300px {width: 300px} 
.figcomponent-400px {width: 400px}
.figcomponent-500px {width: 500px} 
.figcomponent-600px {width: 600px} 
.figcomponent-700px {width: 700px} 
.figcomponent-800px {width: 800px} 
.figcomponent-900px {width: 900px} 

		
	@media only screen and (min-width: 76em) {
		#figcomponent-left > figure {margin: 5.5rem 2rem 1rem -2rem; transition: all 0.5s ease;}
		#figcomponent-right > figure {margin: 5.5rem -2rem 1rem 2rem; transition: all 0.5s ease;}
		}

	@media only screen and (max-width: 40em) {
		#figcomponent-left > figure {margin: 5.5rem 0rem 1rem 0rem; transition: all 0.5s ease;}
		#figcomponent-right > figure {margin: 5.5rem 0rem 1rem 0rem; transition: all 0.5s ease;}
		
		.figcomponent-200px, .figcomponent-300px, .figcomponent-400px, .figcomponent-500px, 
		.figcomponent-600px, .figcomponent-700px .figcomponent-800px, .figcomponent-900px {width: 100%} 
		}


	/*** End Organizational | Image Captions ***/