@font-face { font-family: Alfa; font-weight: 400; src: url('/static/fonts/new/AlfaSlabOne-Regular.ttf?a77b0cb75e54'); }

@font-face { font-family: Arvo; font-weight: 400; src: url('/static/fonts/new/Arvo-Regular.ttf?a77b0cb75e54'); }
@font-face { font-family: Arvo; font-weight: 700; src: url('/static/fonts/new/Arvo-Bold.ttf?a77b0cb75e54'); }

@font-face { font-family: Calistoga; font-weight: 400; src: url('/static/fonts/new/Calistoga-Regular.ttf?a77b0cb75e54'); }

@font-face { font-family: Concert; font-weight: 400; src: url('/static/fonts/new/Concert-Regular.ttf'); }

@font-face { font-family: Corben; font-weight: 400; src: url('/static/fonts/new/Corben-Regular.ttf?a77b0cb75e54'); }
@font-face { font-family: Corben; font-weight: 700; src: url('/static/fonts/new/Corben-Bold.ttf?a77b0cb75e54'); }

@font-face { font-family: Dongle; font-weight: 200; src: url('/static/fonts/new/Dongle-Light.ttf?a77b0cb75e54'); }
@font-face { font-family: Dongle; font-weight: 400; src: url('/static/fonts/new/Dongle-Regular.ttf?a77b0cb75e54'); }
@font-face { font-family: Dongle; font-weight: 700; src: url('/static/fonts/new/Dongle-Bold.ttf?a77b0cb75e54'); }

@font-face { font-family: Jost; font-weight: 400; src: url('/static/fonts/new/Jost-Regular.ttf?a77b0cb75e54'); }
@font-face { font-family: Jost; font-weight: 700; src: url('/static/fonts/new/Jost-Bold.ttf?a77b0cb75e54'); }

@font-face { font-family: Lora; font-weight: 400; src: url('/static/fonts/new/Lora-Regular.ttf?a77b0cb75e54'); }
@font-face { font-family: Lora; font-weight: 700; src: url('/static/fonts/new/Lora-Bold.ttf?a77b0cb75e54'); }

@font-face { font-family: Metropolis; font-weight: 200; src: url('/static/fonts/Metropolis/Metropolis-Thin.otf?695727b89538'); }
@font-face { font-family: Metropolis; font-weight: 400; src: url('/static/fonts/Metropolis/Metropolis-Light.otf?695727b89538'); }
@font-face { font-family: Metropolis; font-weight: 700; src: url('/static/fonts/Metropolis/Metropolis-Bold.otf?695727b89538'); }

@font-face { font-family: Raleway; font-weight: 200; src: url('/static/fonts/new/Raleway-Light.ttf?a77b0cb75e54'); }
@font-face { font-family: Raleway; font-weight: 400; src: url('/static/fonts/new/Raleway-Regular.ttf?a77b0cb75e54'); }

@font-face { font-family: Staatliches; font-weight: 400; src: url('/static/fonts/new/Staatliches-Regular.ttf?a77b0cb75e54'); }

@font-face { font-family: ZillaSlab; font-weight: 200; src: url('/static/fonts/Zilla_Slab/ZillaSlab-Light.ttf?695727b89538'); }
@font-face { font-family: ZillaSlab; font-weight: 400; src: url('/static/fonts/Zilla_Slab/ZillaSlab-Regular.ttf?695727b89538'); }
@font-face { font-family: ZillaSlab; font-weight: 700; src: url('/static/fonts/Zilla_Slab/ZillaSlab-Bold.ttf?695727b89538'); }

:root {
	--col_gray: #555555;
	--col_dark-gray: #333333;
	--col_navy: #344A5F;
	--col_blue: #2A94D6;
	--col_off-white: #F0F1F2;
	--col_white: #FFFFFF;

	--col_cyan: #4EB1CB;
	--col_red: #CF5C60;
	--col_orange: #E89055;
	--col_purple: #717ECD;
	--col_green: #4AB471;
	--col_yellow: #F3AE4E;
	--col_pink: #D96383;

	--font_ui: "Jost", serif;
	--font_heading: "Arvo", serif;
	--font_subheading: "Arvo", serif;
	--font_text: "Lora", sans-serif;

    --col_body: var(--col_blue);
}

/**
Alfa
Arvo
Bungee
Calistoga
Concert
Corben
Dongle
Jost
Lora
Metropolis
Raleway
Staatliches
ZillaSlab
**/

.theme-dark {
	--col_bg: var(--col_dark-gray);
	--col_heading: var(--col_blue);
	--col_text: var(--col_white);
	--col_text-light: var(--col_off-white);

	--col_accent1: var(--col_cyan);
	--col_ui: var(--col_purple);
}

.theme-light {
	--col_bg: var(--col_off-white);
	--col_heading: var(--col_blue);
	--col_text: var(--col_navy);
	--col_text-light: var(--col_navy);

	--col_accent1: var(--col_cyan);
	--col_ui: var(--col_purple);
}

.theme-dark, .theme-light {
	background-color: var(--col_bg);
	color: var(--col_text);
}


/******* global *********/
*,
*::before,
*::after {
	box-sizing: border-box;
}

/******* body + sections*********/

body {
	font-family: var(--font_text);
    background-image: url('/static/img/lines.png?3754642ba297');
}

main > section, main > div {
	width: 100%;
}

section > a {
	display: block;
	margin: 1em 0;
}


/******* headings *********/

:is(h1, h2, h3, h4, h5, h6) {  color: var(--col_heading); }
:is(h1, h2) { font-family: var(--font_heading); }
:is(h3, h4, h5, h6) { font-family: var(--font_subheading); }

h1       { font-size: 2.0em;	margin: 1.4rem 0;		font-weight: 400; }
h2       { font-size: 1.7em; 	margin: 1.2rem 0;     	font-weight: 400; }
h3       { font-size: 1.4em; 	margin: 1.0rem 0;     	font-weight: 200; }
h4,h5,h6 { font-size: 1.0em; 	margin: 0.5rem 0 0 0; 	font-weight: 700; }

h1 {
	width: 100%;
	text-align: center;
}

/***** paragraphs *****/

p {
	line-height: 1.4;
	margin: 0.6em 0;
}

p.emph {
	color: var(--col_accent1);
	font-size: 1.2em;
	font-family: var(--font_subheading);
	font-weight: 200;
}

strong {
	font-family: var(--font_heading);
	font-size: 0.8em;
}

/***** links *****/

a {
	font-weight: bold;
	color: var(--col_ui);
	font-family: var(--font_ui);
	text-decoration: none; 
}
a:hover {
	text-decoration: underline;
}

/***** lists *****/

ul, ol {
	margin: 0.4em 0;
	padding-left: 1.2em; 
	list-style-position: outside;
	line-height: 1.6;
}
li.indent-1 {
	margin-left: 1em;
}
li.indent-2 {
	margin-left: 2em;
}

/***** images *****/

img {
	display: block;
	width: auto;
	max-width: 100%; 
}

/***** horizontal line *****/

hr {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--col_accent1);
	margin: 1.2em 0; 
}

/***** blockquotes *****/
blockquote {
	margin: 1.2em 0;
	border-left: clamp(2px, 1.5vw, 5px) solid var(--col_accent1);
	border-radius: clamp(2px, 1.5vw, 5px);
	width: 100%;
	padding: 1.0em;
	background-color: var(--col_bg-alt);
}
blockquote p {
	margin: 0;
	display: block;
	width: 100%; 
	font-style: italic;
	color: var(--col_text-light);
}

/***** code/pre *****/
pre {
	margin: 1.2em 0;
	width: 100%;
	padding: 0.6em 0.9em;
	white-space: pre-wrap;
	tab-size: 2;

	background: var(--col_bg-alt);
	color: var(--col_text-light);
}

code {
	margin: 0 0.2em;
	padding: 0 0.2em;
	background: var(--col_bg-alt);
	font-size: 0.8em;
}

/***** tables *****/

table {
	margin: 10px 0;
	width: 100%;
	padding: 0;
}

thead {
	margin: 0;
	width: 100%;
	padding: 0.2em 0;
	background: var(--col_accent1);

	display: flex;
}
thead code {
	background: var(--col_accent1);
}

tbody {
	margin: 0;
	width: 100%;
	border: 1px solid var(--col_accent1);
	display: block;
}

tr {
	width: 100%;
	min-height: 1em;

	display: flex;
}
tbody tr:nth-child(odd){
	background: var(--col_bg);
}
tbody tr:nth-child(even){
	background: var(--col_bg-alt);
}

th {
	padding: 0.4em 0.5em;
	color: var(--col_white);
	font-weight: bold;
	text-align: left;
	flex: 1 1;
}

td {
	padding: 0.4em 0.5em;
	color: var(--col_text);
	text-align: left;
	flex: 1 1;
}


/********* button ***********/

button {
	margin: 0.2em 0;
	border: none;
	border-radius: 0.4em;
	min-width: 8em;
	padding: 0.3em;

	background-color: var(--col_ui);
	color: var(--col_white);

	text-align: center;
	font-family: var(--font_ui);
	font-size: 1.20em;

	cursor: pointer;
}
button:hover, button.cancel:hover {
	background-color: var(--col_navy);
}
button.cancel {
	background-color: var(--col_gray);
}

/********************** Global Settings ****************************/

/* Variables */
:root {
	font-size: clamp(16px, 2.5vw, 22px);

	--h_header: 2rem;
	--h_footer: 5rem;
	--w_navbar: clamp(240px, 30vw, 360px);
	--w_content-max: 800px;
}

.centered {
	align-items: center;
	text-align: center;
}


/*********************** Special Media Rules *******************/
@media print {
	nav, header, footer {
		display: none;
		visibility: hidden;
	}
}

/******************** Top-Level Layout ****************/
/* Fixed header at top of page
 * Navbar on side on wide screens
 * #page-container with main and footer i
 ***/

body {
	margin: 0;
	padding: 0;
}

#navbar {
	position: fixed;
	z-index: 2;
	left: 0px;
}

#page-container {
	margin: 0;
	margin-top: var(--h_header);

	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

header {
	position: fixed;
	z-index: 1;
	top: 0px;
}

main {
	margin: 0;
	width: 100%;
	max-width: var(--w_content-max);
	min-height: calc(100vh - var(--h_header) - var(--h_footer));
}

footer {
	margin: 0;
	width: 100%;
	min-height: var(--h_footer);
}

/********** Top Menu Settings ************/
@media (max-width: 768px) {
	#navbar {
		top: calc(var(--h_header) + 6px);
		width: 100%;
		visibility: hidden;
	}
	#navbar.is-visible {
		visibility: visible;
	}
	#page-container {
		margin-left: 0;
		width: 100%;
	}
	header {
		width: 100%;
	}
	.side-nav-only {
		display: none;
	}
}

/********** Side Menu Settings ************/
@media (min-width: 768px) {
	#navbar { 
		top: 0;
		width: var(--w_navbar);
		height: 100vh;
		padding-top: 1em;
	}
	#page-container {
		margin-left: var(--w_navbar);
		width: calc(100% - var(--w_navbar));
	}
	header {
		left: var(--w_navbar);
		width: calc(100% - var(--w_navbar));
	}
	.top-nav-only {
		display: none;
	}
}

@media print {
	#page-container {
		margin: 0;
	}
}

/*************************** NAVBAR *******************************/
/* This defines styling for a nav bar. 	
	If the window is wide (> 768px) it is on the left and always visible
	Otherwise, it is on the top as a hambuger nav. 

	It expects that the rest of the webpage is in a top-level div called page-container */

/* id:navbar - A div that contains the whole nav */
#navbar {
	padding: 0;

	display: flex;
	flex-direction: column;
	align-items: center;

	overflow-x: hidden;
	font-family: var(--font_ui);
}

#navbar > h2 {
	width: 100%;
	text-align: center;
	font-size: 1.6em;
	font-weight: normal;
	margin: 0.2em 0;
}
#navbar > h3 {
	width: 100%;
	text-align: center;
	font-size: 1.4em;
	margin: 0.15em 0;
}

#navbar > img {
	margin: 1em 0;
	width: 80%;
	max-width: 200px;
	padding: 3px;
	border-radius: 100%;
}
#navbar > p {
	font-size: 0.7em;
	margin: 0;
}
#navbar > p.small {
	color: var(--col_text-light);
	font-size: 0.6em;
	margin: 0;
}

#navbar > a {
	margin: 0.5em 0 0 0;

	border: none;

	display: block;
	width: 100%;

	color: var(--col_text);

	text-align: center;
	font-size: 1.4em;
	font-weight: 200;
	text-decoration: none;
}
#navbar > a:hover {
	text-decoration: underline;
	font-weight: normal;
}
#navbar > a.sub1::before {
	content: " -";
	margin-right: 2px;
}
#navbar > a.sub1::after {
	content: "- ";
	margin-left: 2px;
}
#navbar > a.sub1 {
	margin: 0.10em 0;
	font-size: 1.2em;
}
body.narrow #navbar > a {
	font-size: 2.0em;
}
body.narrow #navbar > a.sub1 {
	font-size: 1.6em;
}
#navbar > a.current {
	color: var(--col_ui);
	text-decoration: underline;
}

#navbar > hr {
	margin: 0.5em 0;
	width: 80%;
	height: 1px;

	border-bottom: 1px solid var(--col_text);
	background-color: var(--col_bg);
}

#navbar > .nav-icon-set {
	padding: 0.5em 0;
	width: 100%;
	max-width: 300px;
	display: flex;
	justify-content: space-around;
}
#navbar > .nav-icon-set > a {
	width: 16%;
	max-width: 45px;
}
#navbar > .nav-icon-set > a:hover {
	text-decoration: none;
}

/***************************** Header ***************************
 * The header is a bar at the top of the screen 
 * It has a fixed position
 * And 3 parts: A centered h2 title, 
 * A btn_show-nav on the left to show the menu (mobile)
 * And other optional buttons on the right
 ***************************************************************/

header {
	padding: 3px;
	z-index: 2;
	min-height: var(--h_header);

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	font-family: var(--font_ui);
	font-weight: 200;

	overflow: hidden;
	white-space: nowrap;

}

/* id:btn_show-nav - The hamburger icon when in top mode */
header > #btn_show-nav {
	flex: 0 0 var(--h_header);
	margin: 0;
	border: none;
	padding: 0;
	min-width: 0;
	height: var(--h_header);

	background-image: url('/static/icons/nav_light.png?a9cb6b60582c');
	background-color: var(--col_bg);
	background-size: contain;
	background-repeat: no-repeat;
}

header > h2 {
    font-weight: bold;
    font-size: 1.5em;
	text-align: center;
    color: var(--off-white);
	margin: 0;
	flex: 1;
}

/********************* main ***********************/


main {
	padding: 1.5em 1.0em 4.0em 1.0em;
	max-width: var(--w_content-max);

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;


	text-align: left;
}

main ::selection, main ::-moz-selection {
	color: var(--col_white);
	background-color: var(--col_ui);
	display: block; 
}

/** Add extra side padding on very wide screens **/
body.wide main {
    --main-side-padding: calc(1em + (100vw - 1000px)/10);
    max-width: calc(var(--w_content-max) + 2*var(--main-side-padding));
    padding-left: var(--main-side-padding);
    padding-right: var(--main-side-padding);
}


/***************************** Footer ***************************
 * An optional section at the bottom
 ***************************************************************/
footer {
	padding: 1em;
	font-size: 0.8em;
}
footer > p {
	margin: 0.5em;
}


/********************************* TAGS ********************************

.tag - Apply to a span, creates a rounded shaded rectangle with text

Can specify color by adding:
  .yellow-tag .green-tag .blue-tag .gray-tag

If it is a link, add:
  .link-tag

************************************************************************/

.tag {
	padding: 2px 5px;
	border-radius: 5px;
	font-weight: bold;
	font-size: 0.8em;
	text-decoration: none;
	white-space: pre;
	line-height: 2.0em;
	margin-left: 5px;
	font-family: var(--font_ui);
}
@media (min-width: 768px) { .tag{ font-size: 1.0em; } }

.link-tag a {  text-decoration: none; }
.link-tag:hover {
  text-decoration: none;
  cursor: pointer;
}

.yellow-tag                { background-color: #FFC107;   color: #222; }
.yellow-tag.link-tag:hover { background-color: #CFA105;   color: #222; }
.green-tag                 { background-color: #28A745;   color: #fff; }
.green-tag.link-tag:hover  { background-color: #188738;   color: #fff; }
.blue-tag                  { background-color: #007BFF;   color: #fff; }
.blue-tag.link-tag:hover   { background-color: #006BD0;   color: #fff; }
.gray-tag                  { background-color: #333333;   color: #fff;  }
.gray-tag.link-tag:hover   { background-color: #555555;   color: #fff;  }

.centered-tag-list {
    display: block;
    font-size: 20px;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2em;
}

/********************************* CALLOUTS ********************************/

.callout {
	margin: 0.8em 0;
	width: 100%;
	padding: 0;

	display: flex;
	flex-direction: column;
	background-color: var(--col_white);
	color: var(--col_callout-head-text);
}

.callout-title {
	margin: 0;
	width: 100%;
	padding: 0.3em 0.6em;

	font-family: var(--font_heading);
	font-size: 1.0em;
	font-weight: bold;

	background-color: var(--col_callout-head-bg);
}

.callout-title .icon {
	margin: 0 0.3em;
}

.callout-content {
	margin: 0;
	width: 100%;
	padding: 0.4em 1.2em;

	background-color: var(--col_callout-body-bg);
}

.callout-content p {
	display: block;
	margin: 0;
	width: 100%; 
}

.callout.note {
	--col_callout-head-bg:  rgba(68, 138, 255, 0.2);
	--col_callout-head-text: rgb(34, 69, 127);
	--col_callout-body-bg: rgba(68, 138, 255, 0.1);
}

.callout.summary {
	--col_callout-head-bg:  rgba(0, 176, 255, 0.2);
	--col_callout-head-text: rgb(0, 88, 127);
	--col_callout-body-bg: rgba(0, 176, 255, 0.1);
}

.callout.info {
	--col_callout-head-bg:  rgba(0, 184, 212, 0.2);
	--col_callout-head-text: rgb(0, 92, 106);
	--col_callout-body-bg: rgba(0, 184, 212, 0.1);
}

.callout.tip {
	--col_callout-head-bg:  rgba(0, 191, 165, 0.2);
	--col_callout-head-text: rgb(0, 95, 82);
	--col_callout-body-bg: rgba(0, 191, 165, 0.1);
}

.callout.success {
	--col_callout-head-bg:  rgba(0, 200, 83, 0.2);
	--col_callout-head-text: rgb(0, 100, 41);
	--col_callout-body-bg: rgba(0, 200, 83, 0.1);
}

.callout.question {
	--col_callout-head-bg:  rgba(100, 221, 23, 0.2);
	--col_callout-head-text: rgb(50, 110, 11);
	--col_callout-body-bg: rgba(100, 221, 23, 0.1);
}

.callout.warning {
	--col_callout-head-bg:  rgba(255, 145, 0, 0.2);
	--col_callout-head-text: rgb(127, 72, 0);
	--col_callout-body-bg: rgba(255, 145, 0, 0.1);
}

.callout.failure {
	--col_callout-head-bg:  rgba(255, 82, 82, 0.2);
	--col_callout-head-text: rgb(127, 41, 41);
	--col_callout-body-bg: rgba(255, 82, 82, 0.1);
}

.callout.error {
	--col_callout-head-bg:  rgba(255, 23, 68, 0.2);
	--col_callout-head-text: rgb(127, 11, 34);
	--col_callout-body-bg: rgba(255, 23, 68, 0.1);
}

.callout.example {
	--col_callout-head-bg:  rgba(124, 77, 255, 0.2);
	--col_callout-head-text: rgb(63, 38, 127);
	--col_callout-body-bg: rgba(124, 77, 255, 0.1);
}

.callout.quote {
	--col_callout-head-bg:  rgba(158, 158, 158, 0.2);
	--col_callout-head-text: rgb(79, 79, 79);
	--col_callout-body-bg: rgba(158, 158, 158, 0.1);
}




/******************** box-item ***********************

+--------+-------------------------------------+
|        |               TITLE                 |
|  YEAR  |              subtitle               |
|        |                                     |
+--------+-------------------------------------+

******************************************************/

.box-item-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	max-width: 500px;
}

.box-item {
	display: flex;
	flex-direction: row;
	max-width: 500px;
	margin-top: 1.5em;
	color: #fff;
}

.box-item .year {
	padding: 0 0.5em;
	width: clamp(0px, 15vw, 75px);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 1.25em;
}

.box-item .info {
	margin: 0px;
	padding: 0.5em 1.0em;
	width: clamp(0px, 80vw, 425px);
	text-align: center;
	font-size: 1.0em;
}

.box-item .info .title {
	font-weight: bold;
}


/**************** two-col *****************
 * A flexbox 2 column layout
 * that collapses on a smaller screen
 ******************************************/

.two-col {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 2em;
}
.two-col > * {
	flex: 1;
}
@media (max-width: 768px) {
	.two-col { flex-direction: column; }
}

/**************** section .compact *****************
 * Makes the section smaller and more compact
 ******************************************/
@media (min-width: 768px) { 
	section.compact {
		font-size: 0.8em;
	}
}
section.compact h3 {
	margin-bottom: 0;
}
section.compact p {
	margin: 0;
}


#mouseover-info {
	position: absolute;
	width: 400px;
	border: 1px solid #222;
	background: #fff;
	visibility: hidden;
	padding: 5px;
	font-size: 0.7em;
}

/********************* image-card *************************
 * A responsive card with a header (h3), img, and paragraph
 *********************************************************/

.image-card {
	margin: 1.5em auto;
	padding: 0.5em 0.2em;

	display: grid;

	background-color: white;
	box-shadow: #44444444 3px 3px 5px;
}
@media (min-width: 768px) {
	.image-card {
		grid-template-columns: 1fr 3fr;
	}
	.image-card h3 {
		grid-area: 1/2/2/3;
		margin: 0;
	}
	.image-card img {
		grid-area: 1/1/3/2;
		margin: auto 0;
	}
	.image-card p {
		grid-area: 2/2/3/3;
	}
}
@media (max-width: 768px) {
	.image-card {
		grid-template-columns: 1fr;
		max-width: 400px;
	}
	.image-card img {
		grid-area: 2/1/3/2;
		margin: 0 auto;
		width: 80%;
		max-width: 200px;
	}
	.image-card h3 {
		grid-area: 1/1/2/2;
		margin: 0.1em;
	}
	.image-card p {
		grid-area: 3/1/4/2;
		width: 100%;
		padding: 0 2em;
	}
}

/******** button-list *********/
/* Just a div with a list of buttons */

div.button-list {
	width: 100%;
	max-width: 20em;
}
div.button-list a {
	width: 100%;
}
div.button-list button {
	width: 100%;
	font-size: 1.0em;
}

/********************* THEME SETTINGS ***********************/

body { 
	background-image: url('/static/congo/img/leaves.jpg?3754642ba297');
}

.theme-dark {
	--col_ui: var(--col_orange);
}

.theme-congo {
	--col_ui: var(--col_orange);
	--col_accent1: var(--col_orange);
	--col_heading: var(--col_orange);
	--col_bg: #F3EDE2;
}

.theme-congo {
	background-color: var(--col_bg);
	color: var(--col_text);
}

/****************** GENERAL ELEMENTS *****************/

main hr {
	margin: 2em 0;
}

/****************** PAGE ELEMENTS *****************/

#banner-img {
	margin: 0;
	width: 100%;
	height: 10em;
	background-image: url('/static/congo/img/campus_wide.jpeg?a9cb6b60582c');
	background-size: cover;
	background-position: center;
}

#intro > :first-child {
	flex: 0.5;
}
#intro img {
	width: 100%;
	max-width: 250px;
	margin: 0 auto;
}

body.narrow #role-img {
	width: 80%;
	max-width: 400px;
	margin: 0 auto;
}

#org-list {
	font-size: 0.8em;
}
body.normal #org-list .image-card, body.wide #org-list .image-card {
	grid-template-columns: 1fr 4fr;
}

.photo-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 20px;
	margin: 1em;
}
.photo-container div {
	max-width: 30em;
	background-color: white;
	box-shadow: #44444444 3px 3px 5px;
}
.photo-container div img {
	width: 100%;
}
.photo-container div p {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 0.8em;
	margin: 0;
	padding: 0.2em;

	
}