/*------------------------------------ General About ------------------------------------*/

.about-header{ position:relative; }

.about-header .breadcrumbs { background:rgba(14,0,21,0.4); }

.about-nav {}

.about-nav li a {}

#menu-about-menu{
text-align:center;
margin:0 auto; 
padding: 0px;
display:flex; 
justify-content: space-around;
max-width:650px;
}

#menu-about-menu li{
display: inline-block; 
text-align: center;
display:flex;
flex:1 1 auto;
margin:0;
}
#menu-about-menu a{
display:inline-block;
padding: 0.75em .25em; 
line-height:1;
color:#ddd;
text-align: center;
text-decoration:none;
background:rgba(0,0,0,.75);
outline:solid 1px rgba(200,200,200,0.15);
flex:1 1 auto;
}
#menu-about-menu a:hover, #menu-about-menu a:active{color:#fff;}

#menu-about-menu li.current-menu-item a {
background:white;
	color:#666;
}

.header-overlay {
background: rgba(10,0,10,.5);

}

.about-intro{
text-align:center; 
overflow:auto; 
padding-bottom:1em;
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

.about-intro h1 { margin:.6em; font-size:3.2em; line-height: 1.04;}


/*------------------------------------ Main About Page ------------------------------------*/

#timeline-graphic{width:100%; margin: 0em;}

 


/*------------------------------------ Internships Page ------------------------------------*/

#paden{color: #0664a3;}
#paden h5{color: #0664a3;}

/*------------------------------------ Our Team Page ------------------------------------*/

.card-wrapper {
text-align:center; 
display:flex; 
flex-wrap:wrap; 
justify-content: space-around;
padding:1em;
padding-top:110px;
padding-bottom:0;
}

/*------------Card Flips---------------*/

.individual{
display:inline-block;
min-height: 24em;
min-width: 15em;
margin: .5em;
margin-bottom:110px;
perspective: 1700px;
text-align: center;
flex:1 1 auto;
transform-origin: 50% 50% 150px;
}

.individual .inner {max-width:18em;}

.employee-flip{
position: relative;
transform: rotateY(0deg);
transition: .75s cubic-bezier(.18,.89,.32,1.28) ;
transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
width:100%; height:100%;
}

.individual.flipped .employee-flip{
	transform: rotateY(180deg);
}
.employee-flip > div  {
position: absolute;
}

.individual header{
position: absolute;
top: -102px;
width: 100%;
z-index: 99;
cursor:pointer;
} 
.individual header .post-edit-link{
position:absolute; top:0; right:0;
font-size:12px; background:#eee;
padding:2px;
}

.individual img{
width:220px;
border-radius: 50%;
}

.individual header { 
transition: .75s cubic-bezier(.18,.89,.32,1.28) ;
}

 .individual.flipped header{
	transform:translateZ(50px);
}


@keyframes CardHeaderFlip {
	0%{}
	45%{transform: translateZ(130px);}
	100%{}
}

@keyframes CardHeaderFlip2 {
	0%{}
	45%{transform: translateZ(120px);}
	55%{transform: translateZ(120px);}
	100%{}
}

.primary-info{
	transform: rotateY(0deg);
}

/*.individual:hover .employee-flip { transform: rotateY(150deg); }*/

/*------------Card Styles---------------*/

.personal-details, .primary-info { border-radius: 30px; width:100%; min-height:24em; padding:120px 12px 16px; backface-visibility:hidden; }

.personal-details{ 
border:solid 3px #ddd; 
background: #eff0f1; 
background: linear-gradient( 135deg, #eff0f1, #fdfdfd, #f8f8f8, #eff0f1);
transform: rotateY(180deg) translateZ(1px);
overflow:hidden;
}

.personal-details h5{
	font-size: 1.25em;
    line-height: 1.25;
    color: #777;
	font-weight:300;
	margin-top:0;
}

.personal-details a{
font-size: 19px;
color: #b3b3b3;
}

.flip-toggle{
width: 80px;
position: absolute;
bottom: -4px; right: 0;
border-radius: 0px;
padding:0 16px;
opacity:0.35;
cursor:pointer;
z-index:33;
border:solid 1px #aaa;
background:#fff;
box-shadow: 0 0 5px rgba(0,0,0,.15);
border-radius:24px 0 30px 0;
}
.flip-toggle:hover { transform: scale(1.07); opacity:1;}

.primary-info {
overflow:hidden;
color: #101e30;
background: #fff;
}

.primary-info h3{ font-weight:300; font-size:1.55rem; margin-top:0; }
.primary-info h4:before {content:''; display: block; border-top:solid 2px; margin:.45em; margin-top:-.15em;}
.primary-info h4{font-size:0.95em; }
.primary-info li{font-size:0.95em;  text-align: left; line-height: 1.25; margin: .5em auto;}
a.employee-email {font-size:0.85em; text-decoration:underline;  }
.primary-info ul{padding:0 0 0 1em; margin-bottom: 0px;margin-top: 2px;}

/*------------------------------------ Our Jobs Page ------------------------------------*/

.job-listing {
box-shadow: 0 1px 3px rgba(0,0,0,.4);
background: #fff;
margin: 0.75em auto;
padding: .5em 1.5em .5em;
position:relative;
	max-width:52em;
}

.job-listing .post-edit-link {
position:absolute; top:0; right:0;
border:solid 1px;
padding:8px;
line-height:1;
}

.job-title {text-align:center;  border-bottom:solid 0.06em; padding-bottom:6px; }
.job-title a {
    text-decoration: none;
    display: block;
    border-bottom: solid 1px #B6DBF3;
    padding: 12px;
    background: linear-gradient( #dcf2ff , #edfbff  );
	border-radius:8px 8px 0 0;
}
.job-title a:hover {
    border-color: #81CAF9;
}
.job-title small {
display:block; 
font-size:55%; 
font-weight:300;
text-align:center;
margin: .2em 0 ;
}

.job-info {
text-align:center;
}
.job-info > div { display:inline-block; padding:6px; font-weight:300; }
.job-info > div:before {content:attr(title); display:block; font-weight:400; font-size:.8em;}

.job-post-date {
font-size:.8em;
margin:1.7em 0;
font-weight:bold;
}

.job-listing > .inner { max-width:36em; margin:auto; padding:0; }

.position-filled {
    background: rgba(200,10,10,.8);
    color: white;
    padding: .2em;
    text-align: center;
    font-size: 1.45em;
}

/*------------------------------------ Media Queries ------------------------------------*/


@media (max-width:750px) {
	#menu-about-menu{margin-top:0px;}
}

@media (max-width:600px) {
	.job-listing{flex-direction: column;}
}

@media (max-width:400px) {
	.individual{ font-size:130%;}
	.about-intro h1 { font-size:2.6em; }
	#menu-about-menu a{ padding:1.25em .25em; }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	individual.flipped { transform: rotateY(0deg); }
	.individual .personal-details, .individual .primary-info{ transition: .1s ease-in-out;  }
	.personal-details { transform: rotateY(180deg); }
	.individual.flipped .personal-details{ z-index:9; }

}