@charset "utf-8";
/* CSS Document - Meet Our Interns and JPOs*/

/* Flexbox for JPO / intern thumbnails */
.profile-header { 
	display       : block;
	text-align    : center;
	font-size     : 1.25rem;
	font-weight   : 500;
	margin-bottom : 4px;
	padding-top   : 4px;
	padding-bottom: 4px;
	border-bottom : 1px solid var(--bs-emphasis-color); }

nav:not(.fixed-top-2) { display: none; }
nav.fixed-top-2 { top: 0; margin-top:0 }

#main-container { top:75px; hyphens: auto; } 
#flexy img { 
	height    : 100px; width: 100px;
	box-shadow: 2px 2px 2px var(--bs-dark);
	border    : 1px inset var(--bs-body-color);
	margin    : 6px; }
#flexy img:hover { 
	cursor           : pointer;
	transform        : scale(1.15);
	-moz-transform   : scale(1.15);  /* Firefox */
	-webkit-transform: scale(1.15);  /* Safari and Chrome */
	-o-transform     : scale(1.15);  /* Opera */
}
/* Darken image on activation */
#flexy img:active, #flexy .activated {
	filter    : brightness(60%);
	box-shadow: 0px 0px 12px 4px var(--bs-danger);
}

.sort-overwrapper {
	width : calc(50vw - 15px);
	border: 1px solid var(--bs-emphasis-color);
}

/* Profile body rules */
#profile .flag {
	margin: 8px 0 8px 8px;
	float : right;
}

#profile img { 
	height       : 400px; width: 300px;  /* Native: 800x600 */
	float        : right;
	border       : 1px inset var(--bs-body-color);
	box-shadow   : 2px 2px 2px var(--bs-dark);
	margin-left  : 15px;
	margin-bottom: 10px;
	transition-duration: 0.35s;	
}

#profile img:hover { height:800px; width: 600px; }

#profile p, ul, ol { 
	text-align : justify;
	line-height: 1.3em;
}
#profile p a { font-weight:500; text-decoration:none; }
#profile h1, #profile h2.h3 { color:var(--bs-emphasis-color); padding:0; margin-bottom:0.3rem }
#profile h1 { font-size: 2.0rem }					
#profile h2.h3 { font-size: 1.5rem; font-weight:300; line-height: 1.2em; }
#profile h3.h5 { font-size: 1.2rem; font-weight:400; margin-bottom: 1.0rem }
#profile h3 a { color:var(--bs-primary-text-emphasis); text-decoration:none; }
#profile h3.h6 { font-size: 1.3rem; font-weight:500; margin-bottom: 0.4rem; padding-bottom: 0.2rem; color:var(--bs-danger-text-emphasis); border-bottom: thin solid var(--bs-danger-text-emphasis); }

#profile .quote {
	color      : var(--bs-danger-text-emphasis);
	font-weight: 400;
	line-height: 1.2em; }
#profile .quote a { color: var(--bs-warning-text-emphasis); font-weight:500; text-decoration:none; }
#profile .anglequotes {	font-weight: 900; }

/* Adapted from http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/ */
.customTooltip {
	z-index      : 9999;
	position     : absolute;
	border       : thin solid var(--bs-danger-border-subtle);
	background   : rgba(var(--bs-body-color-rgb), 0.9);
	border-radius: 6px;
	padding      : 6px;
	width        : 160px;
	text-align   : center;
	font-size    : small;
	font-family  : "Segoe UI", sans-serif;
	color        : var(--bs-body-bg);
}

button.expander {
	background: var(--bs-secondary-bg);
	width     : 32px;
	height    : 32px;
	border    : 1px solid var(--bs-emphasis-color);
	outline   : none;
}

button.expander span {
	position     : absolute;
	transition   : 0.3s;
	background   : var(--bs-success);
	border-radius: 10px;
}

button.expander span:first-of-type {
	top: 25%; bottom: 25%; left: 45%;
width: 10%;
}

button.expander span:last-of-type {
	top: 45%; left: 25%; right: 25%;
	height: 10%;
}

button.expander.expanded span:first-of-type,
button.expander.expanded span:last-of-type {
	transform : rotate(90deg);
	background: var(--bs-danger)
}

button.expander.expanded span:last-of-type {
	left: 50%; right: 50%;
}



@media only screen and (min-width: 610px) {
	.videos { width: 100%; max-width: 600px;  height: 344px; }
}

@media only screen and (max-width: 900px) and (min-width: 610px) {
	#profile img { 
		height: 400; width: 300px; /* Does nothing */
	}
}

@media only screen and (max-width: 610px){
	#profile img { 
		float: none;
		display:flex;
		margin:0.75rem auto;
		width:100%;
		height: auto;
		transition-duration: 0.35s;	
	}
	#profile img:hover { 
		width:100%;
		height: auto;
	}

	.sort-overwrapper {
		width:100%; 
	}
}